CSS 保持所有 Flexbox 子元素大小相同

Question

我的代码显示在这个JSFiddle中：

#container {
    align-content: flex-start;
    background-color: red;
    display: flex;
    flex-flow: row wrap;
    height: 200px;
    justify-content: space-around;
    padding: 10px;
    width: 400px;
}

.child-item {
    background-color: yellow;
    flex-basis: 75px;
    flex-grow: 1;
    height: 20px;
    margin: 10px;
    width: 75px;
}

<div id="container">
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
</div>

尽管如此，我希望底部的两个项目与顶部的项目相同。

我不想将它们向左浮动并固定它们的宽度，这不适用于我在其他分辨率下的排列。

Answer 1

您有两种方法可以做到这一点：

弹性增长：0（小提琴）

如果将

flex-grow

设置为 0，则表示项目保持其宽度；这可以最大限度地增加空闲空间。使用

flex-grow: 1

项目将扩展其宽度以填充尽可能多的空白空间。

看不见的物品（小提琴）

在具有相同弹性属性的普通项目之后添加一些不可见的项目。您将获得左对齐的外观。

在此解决方案中，所有可见行中的项目数量相同，因此请确保添加足够的不可见项目，以便在较大的屏幕上正常工作。

Answer 2

我无法回复伊戈尔的回答来建议改进他的解决方案，但他的小提琴并不完全适用于响应式布局。

第一个带有

flex-grow: 0;

的解决方案不会拉伸物品来填充容器。对于不可见物品的第二种解决方案有效，但扩大了容器的高度。不过，删除顶部/底部边距就可以了。

我编辑了 jsfiddle，使其具有响应性并修复了容器扩展的不可见项目，并使用注释来解释我更改的内容。如果容器大于项目行，它仍然不起作用：(fiddle)

我也做了自己的简单解决方案。我试图自己做这件事，伊戈尔的解决方案帮助很大。 （小提琴）

.container {
  display: flex;
  flex-flow: row wrap;
  
  /*style*/
  padding: 0.5em;
  background-color: royalblue;
}
.item {
  flex: 1 0 80px;
  
  /*style*/
  margin: 0.5em;
  padding: 1em;
  text-align: center;
  background-color: lightblue;
}
.filler {
  flex: 1 0 80px;
  height: 0px;
  
  /*style*/
  margin: 0 0.5em;
  padding: 0 1em;
}

<div class="container">
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>

  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

Answer 3

您可以尝试设置

flex-basis: 50%;

和

flex-grow: 1

。

.parent {
  display: flex;
  width: 300px;
  height: 300px;
}

.child {
   flex-basis: 50%;
   flex-grow: 1;
   background: tomato;
   border: 1px solid #ccc;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
<div>

Answer 4

您可以使用元素上的

max-width

（fiddle）让项目停止扩展。要使它们左对齐，请在包装器上使用不同的

justify-content

(fiddle)。

希望这有效！只在 Chrome 中看过这个。

Answer 5

Flex 基础受到最小宽度和最大宽度的限制，因此在这种情况下，如果将最大宽度设置为等于 Flex 基础，您将获得所需的结果。

这还保留了您的对齐属性 - 这意味着如果您连续有 5 个项目，其中还剩下两个，则其余项目仍将在页面上居中且尺寸正确。

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)
       @include max-width(190px)

Answer 6

对于这种情况，网格布局可能比 Flexbox 更合适，因为它可以灵活地处理复杂的安排。

详情请参阅演示：

  

#container {
    align-content: flex-start;
    background-color: red;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    height: 200px;
    padding: 10px;
    width: 400px;
}

.child-item {
    background-color: yellow;
    height: 20px;
}

<div id="container">
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
</div>

Answer 7

对于这类问题，我只使用float。

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}