Flexbox的元素宽度不相等

368

尝试最多包含5个项目且只有3个项目的flexbox导航，但它并未在所有元素之间平均分配宽度。

小提琴

我为此建模的教程是http://www.sitepoint.com/response-fluid-width-variable-item-navigation-css/

萨斯

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

展开摘要

html css flexbox

— 它的克拉克
source

给表一个最小宽度，并用vw单位设置填充可能会有所帮助：jsfiddle.net/2nY9N/2放弃flex-grow并只做flex：1; 它将为其他2个属性使用默认值

— G-Cyrillus 2014年

如何使用flexbox强制划分成相等部分的

— Gajus，2015年

Answers:

907

您链接到的文章中没有提到一个重要的部分，那就是flex-basis。默认情况下flex-basis为auto。

从规格：

如果指定的flex-basis是auto，则使用的flex基础是flex项目的main size属性的值。（它本身可以是关键字auto，它根据内容的大小来调整flex项目的大小。）

每个伸缩项目都有一个flex-basis类似于其初始大小的。然后，从那里开始，所有剩余的可用空间将按比例（基于flex-grow）分配到各个项目之间。使用时auto，此基础是内容大小（或使用定义的大小width等）。因此，示例中总体上包含较大文本的项目将获得更大的空间。

如果希望元素完全均匀，可以设置flex-basis: 0。这会将flex基础设置为0，然后将基于比例分配所有剩余空间（由于所有基础均为0，因此将为所有空间）flex-grow。

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

规范中的这张图很好地说明了这一点。

而这里是工作示例与你的小提琴。

— 詹姆斯·蒙塔涅
source

这在Safari上给我带来了麻烦。

— 雪人

关于此答案的妙处在于，您可以用此示例更好地解释flex-basis，而不是整个互联网上的其他任何地方。我将与麻省理工学院联系，为您提供名誉教授职位。

— dudewad

只是提到，flex: 1;是速记的组合flex-grow: 1，flex-basis: 0。

— Vadim Ovchinnikov

万一有人想深入了解，我在网上看到了这篇很棒的文章：css-tricks.com/flex-grow-is-weird

— Kuldeep Kumar

噢，伙计，当我以为我掌握了CSS时，总是会打我的头。

— ibic

要使用创建宽度相等的元素Flex，您应该将其设置为子元素（弹性元素）：

flex-basis: 25%;
flex-grow: 0;

它将赋予行中所有元素25％的宽度。他们不会成长并一一走下去。

— alexJS
source

这很尴尬，因为它完全削弱了flex的好处。如果您要对列大小进行硬编码，则有更简单的方法来解决问题。

— 克洛尔（Kloar）

根本没错..如果您想拥有相同长度的盒子，并且在行被完全占用时分解了..您可以轻松地实现这一点如果需要最小宽度，也可以设置最小宽度

— Ilario Engler'5

@Kloar您是说，这是flexbox的唯一好处...当您需要相等的宽度（例如，为了提高响应速度）时，它们当然仍然会很有用。另外，这不是说Flexbox不容易吗？

— user2999349