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

我有以下设置。它创建3组项目，均匀分布在页面上。 但是我一点也不能工作。 在我有

.layeritem\u inner

的地方，我想把它们平均分为两部分，但我无法让它们改变大小。 我尝试了各种组合的

flex xxx

和

width

，但似乎没有任何效果。我错过了什么

#分层器
{
显示器：flex；
柔性包装：nowrap；
弯曲方向：行；
证明内容：之间的空间；
调整项目：灵活启动；
}	
layerOneInner先生
{
宽度：18em；
显示器：flex；
弯曲方向：立柱；
边框：纯黑2px；
文本对齐：居中；
}
.layeritem\u列\u标题
{
弹性基础：自动；
字体大小：粗体；
宽度：100%；
背景色：#CFCFCF；
颜色：#000000；
}
.layeritem\u列\u行
{
弯曲方向：行；
垫面：5px；
边框：纯灰1px；
宽度：100%；
}	
.layeritem_inner酒店
{
边框：纯红1px；
宽度：5em；
}

这是一个标题
左侧
右侧
左侧
右侧
这是一个标题
左侧
右侧
左侧
右侧
这是一个标题
左侧
右侧
左侧
右侧

尝试使用一个百分比，使其始终保持在容纳它的容器的一半

我还添加了框大小：边框框；进入你的项目CSS。这包括从红色边框到50%宽度的1px

而不是像5em这样的硬编码，动态性较差

#分层器
{
显示器：flex；
柔性包装：nowrap；
弯曲方向：行；
证明内容：之间的空间；
调整项目：灵活启动；
}	
layerOneInner先生
{
宽度：18em；
显示器：flex；
弯曲方向：立柱；
边框：纯黑2px；
文本对齐：居中；
}
.layeritem\u列\u标题
{
弹性基础：自动；
字体大小：粗体；
宽度：100%；
背景色：#CFCFCF；
颜色：#000000；
}
.layeritem\u列\u行
{
弯曲方向：行；
垫面：5px；
边框：纯灰1px；
宽度：100%；
}	
.layeritem_inner酒店
{
边框：纯红1px；
框大小：边框框；
宽度：50%；
显示：块；
浮动：左；
}

这是一个标题
左侧
右侧
左侧
右侧
这是一个标题
左侧
右侧
左侧
右侧
这是一个标题
左侧
右侧
左侧
右侧

分配

显示：flex到您的
.layeritem\u列\u行
div，然后给
.layeritem\u内部
a
宽度：50%

CSS

.layeritem_column_row
{
    display: flex;
}   

.layeritem_inner
{
    width:50%;
}

结果


当我使用flexbox执行类似操作时，我通常更喜欢flex grow和flex basis的组合，而不是直接对元素使用“with”。我没有看到你的flex项目风格中有任何flex增长。你为什么不用它？有什么特别的原因吗？这将是一个有趣的变体，我相信…
那太好了。我肯定我尝试过这些选项的多种变体，只是没有在正确的位置或正确的顺序。盒子大小对我来说是一个新的选择。我需要仔细阅读一下，因为它看起来可能有用。