Flexbox布局：如何在多行中设置每个项目相同的宽度？ [复制]

Posted 2023-03-05

【中文标题】Flexbox布局：如何在多行中设置每个项目相同的宽度？ [复制]

【英文标题】：Flexbox layout: how to set every item same width in multi rows? [duplicate]

【发布时间】：2019-08-02 20:47:21

【问题描述】：

这是我在 codepen 中的test demo。我希望在项目之间保持相同的边距，所以我使用flex-grow: 1 来填充过宽。

但是，最后一行的项目似乎与前几行的宽度不同。怎么做？

.row
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
 
.col
  min-width: 160px;
  flex-grow: 1;
  margin: 10px 10px;
  background:#eee;
  height: 120px;

这就是我想要的，插件使用 flex-grow 来保持相同的边距

【参考方案1】：

你的min-width 可以将 div 拉到下一行，我会减少它。

你必须在列上使用flex，在行上使用flex-direction

类似这样的：

.row
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
 
.col
  min-width: 20px;
 flex-grow: 1;
  margin: 10px 10px;
background:#eee;
 height: 120px;
 flex: 1;

<div class="row">
<div class="col">
a
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
</div>

.row
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
 
.col
  min-width: 200px;
 flex-grow: 1;
  margin: 10px 10px;
background:#eee;
 height: 120px;
 flex: 1;

<div class="row">
<div class="col">
a
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
</div>

.row
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
 
.col
  width: 200px;
 
  margin: 10px 10px;
background:#eee;
 height: 120px;

<div class="row">
<div class="col">
a
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
</div>

【讨论】：

谢谢，但是项目太多了，不能放在一排...我有更新的细节有问题

它会自动转到下一行，但如果你想在一行中，你必须删除 min-width。

最小宽度是需要的，自动转到下一行就可以了。但我希望物品保持相同的宽度

确定查看所有结果。你也可以使用 max-width

【参考方案2】：

希望下面的代码可以解决你的问题。

.row
  display: flex;
  flex-wrap: wrap;
  background: red;

.col
  flex: 1;
  min-width: calc(33.33% - 30px);
  max-width: calc(33.33% - 30px);
  margin: 10px 15px;
  background:#eee;
  height: 120px;

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

【讨论】：

谢谢，但现在每行仅限于 3 列，可以通过 min-width=160px 动态设置

【参考方案3】：

您可以使用calc 将width 或flex-basis 属性设置为calc(33.33% - 30px)，以便调整左右边距您已申请col - 请参阅下面的演示：

.row
  display: flex;
  flex-wrap: wrap;
  background: red;

.col
  flex-basis: calc(33.33% - 30px);
  margin: 10px 15px;
  background:#eee;
  height: 120px;

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

【讨论】：

谢谢，但现在每行仅限于 3 列，可以通过 min-width=160px 动态设置

但如果你在较小的屏幕上使用min-width，它会破坏这种布局......