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

Question

我的sass（使用指南针获取前缀）是shown in this fiddle ：

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

虽然，我希望底部的两个项目与顶部的项目相同。

我不想将它们向左浮动并修正它们的宽度，这对我在其他分辨率下的排列不起作用。

欢迎任何建议！

Answer 1

你有2种方法可以做到这一点：

flex-grow：0 （fiddle）

如果将flex-grow设置为0，则告诉项目保持宽度并扩展空白区域。使用flex-grow: 1项将扩展宽度以适应空间。

隐藏物品（fiddle）

在具有相同flex属性的普通项之后添加一些不可见的项。你将得到一个左对齐的外观。

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

Answer 2

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

flex-grow: 0;的第一个解决方案不会拉伸项目以填充容器。具有不可见项的第二种解决方案有效，但扩展了容器的高度。删除顶部/底部边距可以解决这个问题。

我编辑了jsfiddle，使其既响应又修复容器扩展的不可见项目，使用注释来解释我所做的更改。如果容器大于项目行，它仍然不起作用：（fiddle）

我也做了我自己的简单解决方案。我自己试图这样做，而Igor的解决方案帮助极大。 （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

您可以使用max-width对元素（fiddle）停止展开。要使它们左对齐，请在包装器（fiddle）上使用不同的justify-content。

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

Answer 4

您可以尝试设置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 5

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

这还将保留您的对齐方式属性-意味着如果您连续有5个项目，而剩余两个项目，则剩余的项目仍将以正确的大小在页面上居中。

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

Answer 6

For this type of problem, I just use float.

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}