如何使Flexbox项目相同的大小

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

例如:

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

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

什么好主意吗?

< a href = " http://codepen。io /不久/钢笔/ gbJBqM noreferrer“rel = > http://codepen.io/anon/pen/gbJBqM < / >

492763 次浏览
小开
最佳答案

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

flex: 1 1 0px;

你的IDE或linter可能会提到the unit of measure 'px' is redundant.;如果你省略了它(比如:flex: 1 1 0)， IE将不会正确地呈现它。因此需要px来支持Internet Explorer，正如@fabb;

小开

你可以添加flex-basis: 100%来实现这一点。

< a href = " http://codepen。io/anon/pen/ragqRq" rel="noreferrer">更新示例 . io/anon/pen/ragqRq" rel="noreferrer">

.header {
display: flex;
}


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

不管怎样，你也可以使用flex: 1来获得相同的结果。

flex: 1的简写与flex: 1 1 0相同，相当于:

.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
小开

如果项的内容使列变大，则需要添加width: 0使列相等。

.item {
flex: 1 1 0;
width: 0;
}

< >强劲的细节: flex: 1 1 0与 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 如果父容器不能为每个项的本地大小相加提供足够的空间(没有空间增长)，则需要使width: 0赋予每个项相同的增长起始点

小开

Adam (flex: 1 1 0)所接受的答案非常适用于宽度固定或由祖先决定的flexbox容器。你想让孩子们适应容器的情况。

但是，您可能会遇到这样的情况:您希望容器能够容纳子容器，并且基于最大的子容器，子容器的大小相同。你可以通过以下方法使flexbox容器适合它的子容器:

  • 设置position: absolute而不设置width或right，或者
  • 将它放入display: inline-block的包装器中

对于这样的flexbox容器，接受的答案是不工作，子容器的大小不相等。我认为这是flexbox的一个限制，因为它在Chrome、Firefox和Safari中表现相同。

解决方案是使用网格代替flexbox。

运行此代码段时，请确保单击完整的页面以正确查看效果。

body {
margin: 1em;
}


.wrap-inline-block {
display: inline-block;
}


#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}


#div2, #div4 {
position: absolute;
left: 1em;
}


#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}


#div0, #div1, #div2 {
display: flex;
}


#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}


#div0 {
margin-bottom: 1em;
}


#div2 {
top: 15.5em;
}


#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}


#div4 {
top: 28.5em;
}
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>


<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>


<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>


<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>


<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>


<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>


<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>


<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>

小开

我不是Flexbox方面的专家，但我通过将我所处理的两个项目的基础设置为50%而做到了这一点。增长到1，收缩到0。

内联样式:flex: '1 0 50%',

小开

这些答案都没有解决我的问题，那就是当我的临时折叠桌子被缩小到太小的宽度时，它们的宽度就不一样了。

我的解决方案是简单地把overflow: hidden;放在flex-grow: 1;单元格上。

小开

这些解决方案对我来说都没用，但这个奏效了:

.header {
display: flex;
}


.item {
width: 100%;
}




/* Demo styles, for aesthetics. */


.demo {
margin: 3rem;
}


.demo .item {
text-align: center;
padding: 3rem;
background-color: #eee;
margin: 0 1.5rem;
}
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>


<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
</div>
</div>


<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
</div>

小开

即使你包装物品也可以，就像网格一样，但不是那么简单，你应该显示它将在媒体查询中包装在哪里))。

例子:

.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}

它是这样工作的:

$n: 4; // Number of columns
$gap: 15px; // Margin pixels


.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}
小开

在flex的子元素上，

flex: 1 1 25%

这将允许有四个项目。

如果你想添加更多的项，那么你可以减少%。

小开

我也有类似的问题，所以找到了作弊的方法。

正如其他人所说，flex-basis和flex-grow: 1是保持项相同大小的方法，但当项太少时，最后一行是例外(它们填满了所有可用空间，使它们比其他项更大)。为了防止这种情况发生，我用visibility: hidden添加了一个空的间隔项，并基于快速计算有多少项而内联设置flex-grow值。

如果你知道父容器的宽度，这就更容易了，但即使你不知道，你也可以使用媒体查询和断点在间隔器上设置flex-grow值。


提交答案