Flexbox 没有为元素提供相等的宽度 [英] Flexbox not giving equal width to elements

问题描述

尝试使用最多 5 个项目和少至 3 个项目的 flexbox 导航，但它没有在所有元素之间平均划分宽度.

小提琴

我在此之后建模的教程是 http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {字体大小:16px；}.tabs {最大宽度:1010px；宽度:100%；高度:5rem；边框底部:纯 1px 灰色；边距:0 0 0 6.5rem；显示:表；表格布局:固定；}.tabs ul {边距:0；显示:弹性；弹性方向:行；}.tabs ul li {弹性增长:1；列表样式:无；文本对齐:居中；字体大小:1.313rem；背景:蓝色；白颜色;高度:继承；左:自动；垂直对齐:顶部；文本对齐:左；填充:20px 20px 20px 70px；边框左上角半径:20px；边框:纯 1px 蓝色；光标:指针；}.tabs ul li.active {背景:白色；颜色:蓝色；}.tabs ul li:before {内容: "";}

<ul><li class="active" data-tab="1">披萨</li><li data-tab="2">鸡汤面</li><li data-tab="3">花生酱</li><li data-tab="4">鱼</li>

解决方案

在您链接的文章中没有提到一个重要的部分，那就是 flex-basis.默认flex-basis 是auto.

来自规范:

<块引用>

如果指定的 flex-basis 是 auto，则使用的 flex base 是 flex item 的 main size 属性的值.(这本身可以是关键字 auto，它根据其内容调整弹性项目的大小.)

每个 flex item 都有一个 flex-basis，有点像它的初始大小.然后从那里开始，任何剩余的可用空间在项目之间按比例分配(基于 flex-grow).使用 auto，该基础是内容大小(或使用 width 等定义的大小).因此，在您的示例中，包含较大文本的项目总体上获得了更多空间.

如果你想让你的元素完全均匀，你可以设置flex-basis: 0.这会将 flex 基础设置为 0，然后任何剩余的空间(由于所有基础都是 0，因此将是所有空间)将根据 flex-grow 按比例分配.

li {弹性增长:1；弹性基础:0；/* ... */}

该规范图 很好地说明了这一点.

还有这里是一个工作示例，用你的小提琴.

Attempting a flexbox nav that has up to 5 items and as little as 3, but it's not dividing the width equally between all the elements.

Fiddle

The tutorial I'm modeling this after is http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {
  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>

解决方案

There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto.

From the spec:

If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, which sizes the flex item based on its contents.)

Each flex item has a flex-basis which is sort of like its initial size. Then from there, any remaining free space is distributed proportionally (based on flex-grow) among the items. With auto, that basis is the contents size (or defined size with width, etc.). As a result, items with bigger text within are being given more space overall in your example.

If you want your elements to be completely even, you can set flex-basis: 0. This will set the flex basis to 0 and then any remaining space (which will be all space since all basises are 0) will be proportionally distributed based on flex-grow.

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

This diagram from the spec does a pretty good job of illustrating the point.

And here is a working example with your fiddle.

这篇关于Flexbox 没有为元素提供相等的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！