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

CSS Keep all flexbox children elements the same size

提问by TaylorMac

My sass (using compass to get the prefixes) is shown in this fiddle:

我的 sass（使用指南针获取前缀）显示在这个小提琴中：

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

Although, I would like the two items across the bottom to have the same with as the items on the top.

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

I don't want to float them left and fix their width, this will not work for my arrangement in other resolutions.

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

Any suggestions welcome!

欢迎任何建议！

回答by Igor

You have 2 ways of doing this:

你有两种方法来做到这一点：

flex-grow: 0(fiddle)

flex-grow: 0( fiddle)

If you set flex-growto 0 you are telling the items to keep their width and expand the empty space. Using flex-grow: 1the items will expand the width to fit the space.

如果您设置flex-grow为 0，您是在告诉项目保持它们的宽度并扩大空白空间。使用flex-grow: 1这些项目将扩大宽度以适应空间。

invisible items(fiddle)

隐形物品（小提琴）

Add some invisible items after the normal items with the same flex properties. You will get a left aligned look.

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

In this solution there will be the same number of items in all visible rows so make sure to add enough invisible items to work properly on larger screens.

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

回答by Ray

I can't reply to Igor's answer to suggest an improvement to his solution, but his fiddle did not work entirely for a responsive layout.

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

The first solution with flex-grow: 0;doesn't stretch the items to fill the containers. The second solution with invisible items works, but expands the height of the container. Removing the top/bottom margins did the trick though.

第一个解决方案 withflex-grow: 0;不会拉伸物品以填充容器。带有隐形物品的第二种解决方案有效，但会扩大容器的高度。不过，删除顶部/底部边距确实有效。

I edited the jsfiddle, to make it both responsive and fix the container-expanding invisible items, using comments to explain what I changed. It still doesn't work if the container is larger than the row of items though: (fiddle)

我编辑了 jsfiddle，使其既响应又修复容器扩展的隐形项目，使用注释来解释我更改的内容。如果容器大于项目行，它仍然不起作用：（小提琴）

I also made my own simple solution. I was trying to do this myself, and Igor's solution helped immensely. (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>

回答by ken

you can try set flex-basis: 50%;and flex-grow: 1.

你可以试试 setflex-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>

回答by vvviolet

You can get the items to stop expanding with max-widthon the elements (fiddle). To get them to left-align, use a different justify-contenton the wrapper (fiddle).

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

Hope this works! Have only been looking at this in Chrome.

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

回答by Ben

Flex basis is limited by min-width and max-width, so in this case, if you set your max-width equal to your flex basis, you will get the desired results.

Flex base 受 min-width 和 max-width 的限制，所以在这种情况下，如果您将 max-width 设置为等于您的 flex base，您将获得所需的结果。

This also retains your alignment properties--meaning that if you have 5 items in a row with two remaining, the remaining items will still be centered on the page and at the correct size.

这也保留了您的对齐属性——这意味着如果您在一行中有 5 个项目而剩下两个项目，则剩余项目仍将在页面上居中且大小正确。

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

回答by Nick Retallack

For this type of problem, I just use float.

对于这种类型的问题，我只使用浮动。

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}