Flex 3列之间有空格[重复]答案

【问题标题】：Flex 3 columns with space between [duplicate]Flex 3列之间有空格[重复]
【发布时间】：2020-06-12 18:41:14
【问题描述】：

我想要一个动态宽度的容器，每行总是有 3 列，第一列在左边，第二列在整行的中心，第三列在右边。有没有自动的方法来实现这一点？

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

|x     x     x|
|x     x     x|
|x            |

我在尝试

display: flex;
flex-wrap: wrap;
justify-content: space-between;

对于物品

flex: 1 0 30%

但30% 使项目更宽，例如：

|x   x   x   |

【问题讨论】：

标签： html css

【解决方案1】：

我想如果你知道总是有 3 列，你可以在列上使用 align-items 来定位 flex-start、center 和 >flex-end.

.row {
   display: flex;
   flex-direction: row;
}

.col {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   border: 1px solid deeppink;
}

.col:nth-child(1) {
   align-items: flex-start;
}
.col:nth-child(2) {
   align-items: center;
}
.col:nth-child(3) {
   align-items: flex-end;
}

<div class="row">
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
</div>
<div class="row">
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
</div>
<div class="row">
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
</div>

【讨论】：

尝试使用 6 或 9 列而不是 3。
问题是will always have 3 columns per row...
对，所以再添加一行三列
好的，我添加了更多行......

【解决方案2】：

您可以使用justify-content: space-between; 来实现它。

.container { display: flex; flex-wrap: wrap;  flex: 0 0 30%; justify-content:space-between;} 
.box {background: #efefef; width: 30%; border:1px solid #fff; height: 150px; }

    
    <div class="container">
        <div class="box box_1">Box 1</div>
        <div class="box box_2">Box 2</div>
        <div class="box box_3">Box 3</div>
        <div class="box box_1">Box 1</div>
        <div class="box box_2">Box 2</div>
        <div class="box box_3">Box 3</div>
    </div>

【讨论】：

我编辑了我的帖子 - 在容器内有更多的 div，而不是三个
我也更新了我的答案。请检查。