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

问题描述

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

例如:

.header {显示:弹性；}.物品 {弹性增长:1；文本对齐:居中；边框:1px纯黑色；}

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

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

有什么想法吗?

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

解决方案

设置它们，使它们的 flex-basis 为 0(所以所有元素都有相同的起点)，并允许它们成长:

flex: 1 1 0px

您的 IDE 或 linter 可能会提到度量单位px"是多余的.如果您将其省略(例如:flex: 1 1 0)，IE 将无法正确呈现.所以 px 需要支持 Internet Explorer，如@fabb 的评论中所述；

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 0px

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by @fabb;

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