如何使Flexbox项目具有相同的大小？ [英] How to make flexbox items the same size?

问题描述

我想使用flexbox，它有一些宽度相同的项目。我注意到，flexbox均匀分布空间，而不是空间本身。

例如：

  .header {display：flex;}。item {flex-grow：1; text-align：center; border：1px solid black;}  

< div class = 报头 > < div class =item> asdfasdfasdfasdfasdfasdf< / div> < div class =item> z< / div>< / div>

第一项比第二项大很多。如果我有3个项目，4个项目或n个项目，我希望它们全部出现在同一行上，每个项目有相同的空间。

有什么想法？

http://codepen.io/anon/ pen / gbJBqM

解决方案

设置它们以使它们的 flex-basis $ （所有元素都有相同的起点），并允许它们增长： flex：1 1 0

I want to use flexbox that has some number of items that are all the same width. I've noticed that flexbox distributes the space around evenly, rather than the space itself.

For example:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

The first item is a lot bigger than the second. If I have 3 items, 4 items, or n items, I want them all to appear on the same line with an equal amount of space per item.

Any ideas?

http://codepen.io/anon/pen/gbJBqM

解决方案

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:

flex: 1 1 0

这篇关于如何使Flexbox项目具有相同的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！