Html 不使用百分比水平分布3列容器的内部div？-弯曲

我想知道是否有更好的方法使用flex在父div中均匀地分隔三个div（水平）。以下是我所拥有的：

.container{
显示器：flex；
}
.左分区、.中分区、.右分区{
显示器：flex；
证明内容：中心；
宽度：33.3%；
}

演示
左边
中间的
赖特

你就快到了，试着用

调整内容：周围的空间

另外，我建议您查看许多有趣的flexbox解释：）


.container{
显示器：flex；
证明内容：周围的空间；
}
.左分区、.中分区、.右分区{
显示器：flex；
证明内容：中心；
/*宽度：33.3%*/
}

演示
左边
中间的
赖特
你就快到了，试着用
调整内容：周围的空间

另外，我建议您查看许多有趣的flexbox解释：）


.container{
显示器：flex；
证明内容：周围的空间；
}
.左分区、.中分区、.右分区{
显示器：flex；
证明内容：中心；
/*宽度：33.3%*/
}

演示
左边
中间的
赖特
可能就是您在这里需要的

flex-grow
CSS属性设置flex-item主大小的flex-grow因子。它指定应将flex容器中剩余空间的多少分配给该项（flex增长因子）


.container{
显示器：flex；
}
.左分区、.中分区、.右分区{
显示器：flex；
证明内容：中心；
柔性生长：1；
}

演示
左边
中间的
赖特
可能就是您在这里需要的

flex-grow
CSS属性设置flex-item主大小的flex-grow因子。它指定应将flex容器中剩余空间的多少分配给该项（flex增长因子）


.container{
显示器：flex；
}
.左分区、.中分区、.右分区{
显示器：flex；
证明内容：中心；
柔性生长：1；
}

演示
左边
中间的
赖特
flex-grow:1；应该均匀地拉伸，没有宽度。填充和边距也不会成为问题；应该均匀地拉伸，没有宽度。填充和边距也不会成为问题。很有趣，它看起来像是
调整内容：空间均匀
也在工作-谢谢！他们很相似，是的。链接的指南引号：
周围的空间
：项目在一行中均匀分布，周围的空间相等。请注意，从视觉上看，空间并不相等，因为所有项目的两侧空间都相等。第一个项目相对于容器边缘有一个单位的空间，但下一个项目之间有两个单位的空间，因为下一个项目有自己的适用间距<代码>均匀间隔
：项目分布使得任意两个项目之间的间隔（以及到边缘的空间）相等。有趣的是，它看起来像是
调整内容：均匀间隔
也在工作-谢谢！他们很相似，是的。链接的指南引号：
周围的空间
：项目在一行中均匀分布，周围的空间相等。请注意，从视觉上看，空间并不相等，因为所有项目的两侧空间都相等。第一个项目相对于容器边缘有一个单位的空间，但下一个项目之间有两个单位的空间，因为下一个项目有自己的适用间距<代码>间距均匀
：项目分布使任意两个项目之间的间距（以及到边缘的间距）相等。