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

Question

我的sass(使用指南针获取前缀)显示在这个小提琴中 :

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

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

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

欢迎任何建议!

Answer 1

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

flex-grow:0(小提琴)

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

隐形物品(小提琴)

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

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

Answer 2

对于Igor提出的解决方案的改进，我无法回答，但他的提琴不能完全用于响应式布局。

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

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

我还提出了自己的简单解决方案。我自己尝试这样做，Igor的解决方案提供了极大的帮助。（小提琴）

.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>