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

Question

我有以下设置。它创建 3 组元素，均匀分布在页面上。但我不能让最后一点工作。在我有 .layeritem_inner 的地方，我希望将它们平均分为两部分，但我无法让它们改变大小。我尝试了 flex-xxx 和 width 的各种组合，但似乎没有任何效果。我错过了什么？

	#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;
	}

		

	<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>

Answer 1

将 display: flex; 分配给你的 .layeritem_column_row div，然后给 .layeritem_inner width: 50%;.

CSS

.layeritem_column_row
{
    display: flex;
}   

.layeritem_inner
{
    width:50%;
}

结果

JSFiddle