如何使用 flexbox 子项创建包装[重复]答案

【问题标题】：How to create wrapping with flexbox children [duplicate]如何使用 flexbox 子项创建包装[重复]
【发布时间】：2017-11-10 04:54:00
【问题描述】：

我希望网格在受外部节点约束时换行：

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

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

我怎样才能达到我想要的结果？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将父级设置为 flex-wrap 将允许它进行换行，而使用 flex:0 1 auto, show for flex: [flex-grow] [flex-shrink] [flex-basis] 将阻止子级收缩到一排。这也是弹性子代的默认设置。

<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>

【讨论】：

【解决方案2】：

按列方向组织它们：

.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>

【讨论】：

你能给我描述一下指定弯曲方向的实际作用吗？
这建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。 Flexbox 是（除了可选的包装）一个单向布局概念。将 flex 项视为主要以水平行或垂直列布局。
如果我有四个单元格，每个单元格宽度为 50px，这会形成一个方形网格吗？
不，它会创建一个单独的列。
好的，我想要一个包装好的网格

【解决方案3】：

只需添加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>

【讨论】：

【解决方案4】：

你有两种可能。

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

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

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

【讨论】：