Question

我希望在外部节点约束时包裹网格：

所以下面应该有两个单元格相互叠加，但是它们并排呈现：

<div style="display:flex; width:100px">
    <div style="flex: 1; width: 100px;">foo</div>
    <div style="flex: 1; width: 100px;">bar</div>
</div>

我怎样才能达到理想的效果？

Answer 1

按列方向组织它们：

.container {
display: flex;
justify-content: left;
align-items: center;
}
.row > div {
width: 50px;
height: 50px;
background-color: lightgray;
}

<div class="container">
  <div class="row">
    <div>foo</div>
    <div>bar</div>
  </div>
  <div class="row">
    <div>foo</div>
    <div>bar</div>
  </div>
</div>

Answer 2

设置父级到flex-wrap将允许它换行，同时使用flex：0 1 auto，show for flex：[flex-grow] [flex-shrink] [flex-basis]，将阻止孩子收缩在一排。这也是flex儿童的默认设置。

＆＃13;

<div style="display:flex; width:100px; flex-wrap:wrap;">
    <div style="flex:0 1 auto; width: 100px;">foo</div>
    <div style="flex:0 1 auto; width: 100px;">bar</div>
</div>

<div style="display:flex; width:100px; flex-wrap:wrap;">
    <div style="flex:0 1 auto; width: 50px;">foo</div>
    <div style="flex:0 1 auto; width: 50px;">bar</div>
    <div style="flex:0 1 auto; width: 50px;">foo</div>
    <div style="flex:0 1 auto; width: 50px;">bar</div>    
</div>

＆＃13;

Answer 3

你有两种可能性。

您可以将flex-direction设置为column。这将设置一个垂直主轴，垂直布置您的项目。

您也可以将flex-wrap设置为wrap。这告诉你的flex容器，当元素超出父元素的宽度时，可以将元素包装起来。在您的情况下，它会将您的第二个元素包装到下一个“行”。

如果您的项目的宽度与示例中的父容器相同，则两种方法的工作方式相同。如果项目的宽度与其父项不同（或者，实际上，在任何其他情况下，您需要在网格中并排放置元素，就像您在评论中提到的情况一样），你会想要使用flex-wrap所以在包装到另一行之前正确地并排布局。

Answer 4

只需添加flex-wrap: wrap;（下面的第二个示例包装，第一个不是因为容器的宽度足够宽以容纳一行中的两个孩子）

<div style="display:flex; flex-wrap: wrap; width:200px; margin-bottom: 50px; border: 1px solid blue;">
    <div style="width: 100px;">foo</div>
    <div style="width: 100px;">bar</div>
</div>

<div style="display:flex; flex-wrap: wrap; width:100px; border: 1px solid red;">
    <div style="width: 100px;">foo</div>
    <div style="width: 100px;">bar</div>
</div>

如何使用flexbox子项创建包装

4 个答案: