CSS: Flexbox中的Flexbox
我稍微玩弄了一下flexboxes，想要组合一个列和行容器。我的问题是：
为什么放在列中的行元素不能覆盖flex容器的整个宽度？
示例代码如下所示：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>
谢谢你的帮助！
回答 3
Stack Overflow用户
发布于 2016-11-29 18:35:17
这是因为Flexbox的工作方式。
由于.horizontal容器本身就是一个flex子容器，因此它会自动调整以适应其他子容器的大小。只为溢出的内容留出空间，这些内容是.horizontal本身的子级。
手动应用宽度将导致为项目创建空间，并且justify-content: space-between将生效。
解决方案，请更改以下规则：
.horizontal {
flex-direction: row;
background-color: red;
width: 100%;
}Stack Overflow用户
发布于 2016-11-29 19:27:32
由于您已经在flex容器上设置了align-items:center;，因此除了居中之外，这些项也只占用它们所需的最小空间量。
如果你没有设置这个属性，那么stretch的默认值就会生效，项目会占据整个宽度。
然后，就像@Michael_B指出的那样，您可以在flex项目上应用align-self:center，以使项目在十字轴上居中。
.flex-container {
color: blue;
background-color: yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content: space-between;
}
.horizontal {
flex-direction: row;
background-color: red;
}
.vertical {
flex-direction: column;
}
.flex-item {
align-self: center;
/* center each flex item along the cross axis */
text-align: center;
/* horizontally center content within flex item */
}<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>
Stack Overflow用户
发布于 2018-08-21 23:02:08
将width: 100%添加到您的水平flexbox中，并将flex: 1添加到其中的项目中，我得到了以下结果：
body {
background-color: black
}
.flex-container {
color: blue;
background-color: yellow;
display: flex;
justify-content: space-between;
align-items: center;
}
.horizontal {
flex-direction: row;
background-color: red;
width: 100%; /*this line was added*/
}
/*these lines*/
.horizontal .flex-item {
flex: 1;
}
/*ware added*/
.vertical {
flex-direction: column;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 75px;
margin: 5px;
line-height: 75px;
color: white;
font-size: 3em;
text-align: center;
}<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>
https://stackoverflow.com/questions/40862933
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号