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

Posted 2023-03-05

【中文标题】Flex 3列之间有空格[重复]

【英文标题】：Flex 3 columns with space between [duplicate]

【发布时间】：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   |

【参考方案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，而不是三个

我也更新了我的答案。请检查。