CSS：Flexbox内的Flexbox [英] CSS: Flexbox within Flexbox
问题描述
为什么放在列中的行元素不能跨越flex-container的整个宽度？
示例代码如下所示： js-fiddle
a> HTML：
/ * CSS：* /。flex-container {color：blue;背景颜色：黄色;文字装饰：粗体; text-size：1em;显示：flex;证明内容：空间之间; align-items：center;}。horizontal {flex-direction：row;我们可以通过下面的代码来实现这个功能： code><身体GT; < div class =flex-container vertical> < div class = flex-item> 1< / div> < div class = flex-item> 2< / div> < div class =flex-container horizontal> < div class = flex-item> 3a< / div> < div class = flex-item> 3b< / div> < div class = flex-item> 3c< / div> < / DIV> < div class = flex-item> 4< / div> < div class = flex-item> 5< / div> < / div>< / body>
帮助！
这是因为Flexbox的工作原理。
由于 .horizontal 容器本身就是一个弹性儿童，它会自动调整为其他孩子的大小。只允许溢出内容的空间，它们是 .horizontal 本身的子元素。
手动应用宽度将导致为这些项目创建空间，并且之间的 justify-content：space将被踢入。
<解决方案，更改以下规则：
.horizontal {
flex-direction：row;
background-color：red;
宽度：100％;
}
I was playing around with the flexboxes a little and wanted to combine a column and row container. The question I have is:
Why do the row elements placed within the column not span the entire width of the flex-container?
The example code is shown here: js-fiddle
HTML:
/* CSS: */
.flex-container {
color: blue;
background-color:yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content:space-between;
align-items:center;
}
.horizontal {
flex-direction:row;
background-color: red;
}
.vertical {
flex-direction:column;
}
<body>
<div class="flex-container vertical">
<div class=flex-item>1 </div>
<div class=flex-item>2 </div>
<div class="flex-container horizontal" >
<div class=flex-item>3a </div>
<div class=flex-item>3b </div>
<div class=flex-item>3c </div>
</div>
<div class=flex-item>4 </div>
<div class=flex-item>5 </div>
</div>
</body>
Thanks for any help!
This is because of the way Flexbox works.
Since the .horizontal container is a flex child itself, it automatically adjusts to the size of the other childs. Only allowing space for the overflowing content, which are the childs of the .horizontal itself.
Manually applying the width will result in the space being created for the items, and the justify-content: space-between will kick in.
Solution, change the following rule:
.horizontal {
flex-direction: row;
background-color: red;
width: 100%;
}
这篇关于CSS：Flexbox内的Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
