我正在玩flexboxes一点,想要组合一个列和行容器.我的问题是:
为什么放置在列中的行元素不会跨越flex-container的整个宽度？
示例代码如下所示: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>谢谢你的帮助!
这是因为Flexbox的工作方式。
由于.horizontal容器本身是flex子代，因此它会自动调整为其他子代的大小。仅为溢出的内容留出空间，这些内容.horizontal本身就是它们的子项。
手动应用宽度将导致为项目创建空间，并且justify-content: space-between将弹出。
解决方法是，更改以下规则：
.horizontal {
flex-direction: row;
background-color: red;
width: 100%;
}