Html CSS:Flexbox中的Flexbox

我在玩FlexBox，想结合一个列和行容器。我的问题是：

为什么列中的行元素不跨越flex容器的整个宽度

示例代码如下所示：

HTML:

/*CSS:*/
.柔性容器{
颜色：蓝色；
背景颜色：黄色；
文字装饰：粗体；
文本大小：1米；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.水平{
弯曲方向：行；
背景色：红色；
}
.垂直{
弯曲方向：立柱；
}

1.
2.
3a
3b
3c
4.
5.

这是因为Flexbox的工作方式

由于

.horizontal

容器本身是一个flex子容器，因此它会自动调整以适应其他子容器的大小。仅允许为溢出内容留出空间，这些内容是

.horizontal

本身的子项

手动应用宽度将导致为项目创建空间，并且

justify content:space between

将生效

解决方案，更改以下规则：

.horizontal {
    flex-direction: row;
    background-color: red;
    width: 100%;
}

---

因为您已经设置了

align items:center除了居中之外，项目也只占用它们所需的最小空间

如果没有设置此属性，则默认值
stretch
将生效，项目将占据整个宽度

然后，正如@Michael_B指出的，您可以在弹性项目上应用
align self:center
，使项目在横轴上居中


.flex容器{
颜色：蓝色；
背景颜色：黄色；
文字装饰：粗体；
文本大小：1米；
显示器：flex；
证明内容：之间的空间；
}
.水平{
弯曲方向：行；
背景色：红色；
}
.垂直{
弯曲方向：立柱；
}
.弹性项目{
自对准：居中；
/*沿横轴将每个弹性项目居中*/
文本对齐：居中；
/*在flex项中水平居中放置内容*/
}

1.
2.
3a
3b
3c
4.
5.
将
宽度：100%
添加到水平flexbox中，并将
flex:1
添加到其中的项目中我得到了以下信息：


正文{
背景颜色：黑色
}
.柔性容器{
颜色：蓝色；
背景颜色：黄色；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.水平{
弯曲方向：行；
背景色：红色；
宽度：100%；/*此行已添加*/
}
/*这些线*/
.横向.弹性项目{
弹性：1；
}
/*增件*/
.垂直{
弯曲方向：立柱；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：100px；
高度：75px；
保证金：5px；
线高：75px；
颜色：白色；
字号：3em；
文本对齐：居中；
}

1.
2.
3a
3b
3c
4.
5.
因为您的
.horizontal
容器不够宽。添加
宽度：100%到它。这相当简单；）我想我已经试过了…呵呵，对不起。咖啡还没有开始。我也不知道为什么宽度不是自动限制的，因此在我找到解决方案之前将其作为注释发布。你能详细说明为什么在
上应用
对齐项目：拉伸
。水平
不起作用吗？@roberrt它起作用，但你需要注意的是，发生的拉伸在横轴上，因此，当弯曲方向为列时，拉伸发生在水平方向上，当弯曲方向为行时，拉伸发生在垂直方向上。这一答案与推理一致。对于纯flex解决方案，从容器中移除
align items:center
。将
align self:center
添加到要居中的弹性项目中。中间的项目（3a/b/c）默认会拉伸：@Michael_b，非常感谢，我在帖子中添加了这一点。谢谢，这会产生预期的结果。Danield的解决方案也产生了一个宽行，但元素不再居中对齐