Html 柔性行不扩展

我在flex列容器中有一个flex行，它不能正确扩展到其子容器的大小，但会压缩到“适合”父容器的大小

Html

---

，你可以看到ul没有占用它所需要的空间。

这里有一个答案，我不确定这是正确的方法

浮动：左；在ul元素上，可以忽略父元素的宽度。但是，由于父容器是flex容器，因此将忽略其子容器的float属性。因此，应该在ul元素周围添加div

---

这是一个有效的例子。

对你所问的有点困惑。但是，如果您只是想使每个li标记适合整个页面，您可以像这样将justify-content属性添加到ul。justify-content根据其x轴对齐内容

.content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
ul {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

我建议查看此页面：

学习flexbox对我帮助很大：

.content {
  display: flex;
  flex-direction: column;
}
ul {
  display: flex;
  flex-direction: row;
}

.content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
ul {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}