如何在两个元素之间平均分配空间

Question

我有以下设置。它创建了3组项目，均匀分布在整个页面中。 但我无法完成最后一点工作。 在哪里.layeritem_inner我希望将它们分成两部分，但我无法让它们改变大小。 我尝试了flex-xxx和width的各种组合，但似乎没有任何效果。我错过了什么？

＆＃13;

＆＃13;

	#layerOneOuter
	{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}	

	.layerOneInner
	{
		width:18em;
		display: flex;
		flex-direction: column;
		border:solid black 2px;
		text-align:center;
	}

	.layeritem_column_header
	{
		flex-basis: auto;
		font-weight: bold;
		width:100%;
		background-color: #CFCFCF; 
		color: #000000;
	}

	.layeritem_column_row
	{
		flex-direction: row;
		padding-top: 5px;
		border:solid grey 1px;
		width:100%;
	}	

	.layeritem_inner
	{
		border:solid red 1px;
		width:5em;
	}

		

＆＃13;

	<div id="layerOneOuter">
		<div class="layerOneInner">
			<span class="layeritem_column_header">This is a Header</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span> <!-- This row should take up 50% of the space -->
				<span class="layeritem_inner">Right Side</span> <!-- This row should take up 50% of the space -->
			</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
		</div>
		
		<div class="layerOneInner">
			<span class="layeritem_column_header">This is a Header</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span> 
				<span class="layeritem_inner">Right Side</span> 
			</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
		</div>
		
		<div class="layerOneInner">
			<span class="layeritem_column_header">This is a Header</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display: flex;分配给.layeritem_column_row div，然后.layeritem_inner width: 50%;。{/ p>

<强> CSS

.layeritem_column_row
{
    display: flex;
}   

.layeritem_inner
{
    width:50%;
}

<强>结果

<强> JSFiddle

Answer 2

尝试使用一个百分比来保持持续一半的容器。

我还添加了box-sizing：border-box;进入你的项目CSS。这包括从红色边框到50％宽度的1px。

而不是像5em那样硬编码的东西，而不是那么动态。

＆＃13;

＆＃13;

#layerOneOuter
	{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}	

	.layerOneInner
	{
		width:18em;
		display: flex;
		flex-direction: column;
		border:solid black 2px;
		text-align:center;
	}

	.layeritem_column_header
	{
		flex-basis: auto;
		font-weight: bold;
		width:100%;
		background-color: #CFCFCF; 
		color: #000000;
	}

	.layeritem_column_row
	{
		flex-direction: row;
		padding-top: 5px;
		border:solid grey 1px;
		width:100%;
	}	

	.layeritem_inner
	{
		border:solid red 1px;
        box-sizing: border-box;
		width:50%;
        display:block;
        float:left;
	}

＆＃13;

<div id="layerOneOuter">
		<div class="layerOneInner">
			<span class="layeritem_column_header">This is a Header</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span> <!-- This row should take up 50% of the space -->
				<span class="layeritem_inner">Right Side</span> <!-- This row should take up 50% of the space -->
			</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
		</div>
		
		<div class="layerOneInner">
			<span class="layeritem_column_header">This is a Header</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span> 
				<span class="layeritem_inner">Right Side</span> 
			</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
		</div>
		
		<div class="layerOneInner">
			<span class="layeritem_column_header">This is a Header</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
			<span class="layeritem_column_row">
				<span class="layeritem_inner">Left Side</span>
				<span class="layeritem_inner">Right Side</span>
			</span>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当我使用flexbox做类似的事情时，我通常更喜欢flex-grow和flex-basis组合，而不是使用＆＃39;＆＃39;直接到元素。我没有看到你的flex-items风格的任何flex-grow。你为什么不使用它？任何特殊原因？我相信这将是一个有趣的变体......