Question

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

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

有什么想法吗？

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

Answer 1

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

flex: 1 1 0

Answer 2

您可以添加flex-basis: 100%来实现此目标。

Updated Example

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

Answer 3

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

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

这是帮助我解决问题的链接： Always equal flexbox columns

Answer 4

我不是flex的专家，但是我通过将我正在处理的两个项目的基准设置为50％到达了那里。增长到1并缩小到0。

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

Answer 5

Adam（flex: 1 1 0）接受的答案非常适合宽度固定或由祖先确定的flexbox容器。您希望孩子们装满容器的情况。

但是，您可能会遇到这样的情况，即您希望容器适合孩子，并且孩子的大小与最大孩子的大小相等。您可以通过以下任一方法使flexbox容器适合其子容器：

设置position: absolute而不设置width或right，或者
将其放入带有display: inline-block的包装中

对于这种flexbox容器，接受的答案确实无效有效，子项的大小不相等。我认为这是flexbox的局限性，因为它在Chrome，Firefox和Safari中的行为相同。

解决方案是使用网格代替弹性框。

https://codepen.io/brettdonald/pen/oRpORG

Answer 6

这些答案都没有解决我的问题，那就是当缩小到太小的宽度时，项目在我的临时Flexbox表中的宽度不相同。

对我来说，解决方案只是将#include <iostream> #include <vector> #include <range/v3/all.hpp> namespace rv = ranges::views; int main() { std::vector<int> v { 1, 2, 3, 4, 5}; for (int i : v | rv::drop(3)) std::cout << i; // prints 45 for (int i : v | rv::drop(7)) std::cout << i; // prints nothing for (int i : v | rv::drop_exactly(3)) std::cout << i; // prints 45 for (int i : v | rv::drop_exactly(7)) std::cout << i; // prints garbage and crashes }放在overflow: hidden;单元格上。

Answer 7

这些解决方案都不适合我，所以我想我会分享一下。

.header {
    display: flex;
}

.header .item {
    width: 100%;
}

CodePen Demo

如何使flexbox项目大小相同？

7 个答案: