Flexbox没有给予元素相同的宽度

Question

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

小提琴

我正在建模的教程是http://www.sitepoint.com/responsive-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>

Answer 1

您链接的文章中没有提到重要的一点,即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;
    /* ... */
}

来自规范的这个图表很好地说明了这一点.

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

Answer 2

正如 @James Montagne 中所解释的，答案flex-basis: 0将确保 Flexbox 列均匀分布，这在这种情况下有效，因为列内容可以换行并且不会强制宽度。但是，在强制列内容宽度的情况下（例如图像宽度或空白：nowrap），解决方案是设置min-width: 0...

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

https://codeply.com/p/sLZxZRFduI

Answer 3

解决方案：

flex: 1;

或者

.flex-child-items{
   flex-grow: 1;
} 

解释：

如果您只将display: flex其水平对齐所有项目，并且宽度将是sum子项的宽度（取决于内容或有时width取决于属性）。

例如：

// 正常的弯曲

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

现在假设您想将空间平均分配给所有这些。为此，请添加flex-grow: 1到 flex 的所有子项中。（本例中为 A、B 和 C）

.A, .B, .C {
    flex-grow: 1;
}

之后它看起来像这样：

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*顺便说一句，如果上面的示例框看起来不像中心，对此表示抱歉，但代码工作可以在项目中尝试一下。

Answer 4

要使用相等的宽度创建元素Flex,您应该设置为您的孩子(flex元素):

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

它将给行25%宽度的所有元素.他们不会一个接一个地成长.