Question

我在弹性列容器中有一个弹性行，它没有正确扩展到其子级的大小，但在父级中压缩为“ fit ”。

HTML

<div class="content">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

CSS

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

In this example，您可以看到ul没有占用所需的空间。

Answer 1

这是一个答案，我不确定这是否正确。

float: left;元素上的

ul将允许忽略父级的宽度。但是，由于父级是Flex容器，因此将忽略其子级的float属性。因此，应该在ul元素周围添加div。

Here是一个有效的例子。

Answer 2

对你的要求感到困惑。但是，如果您只是想让每个li标签适合整个页面，您只需将justify-content属性添加到ul中即可.Zustify-content根据其x轴对齐事物。

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

我建议您查看此页面：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在学习flexbox时，它对我有很大的帮助:)。

flex row不扩展

2 个答案: