Flexbox不给元素相等的宽度 [英] Flexbox not giving equal width to elements

问题描述

尝试使用最多5个项目（最少3个）的flexbox nav，但不会在所有元素之间平均分配宽度。

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.

我建模的教程是 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;

    ul {
        margin:0;
        display: flex;
        flex-direction: row;

        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;

            &.active {
                background: white;
                color: blue;
            }

            &:before {
                content:"";
            }
        }
    }
}

HTML

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

推荐答案

您链接的文章， flex-basis 。默认情况下 flex-basis 是 auto 。

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.

从规范：

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

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

每个flex项目都有一个 flex-basis 这就像它的初始大小。然后从那里，任何剩余的可用空间按比例分配（基于 flex-grow ）。使用 auto ，该基础是内容大小（或定义的大小与 width 等）。因此，在您的示例中，整个文本中包含较大文本的项目将获得更多空间。

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.

如果您希望元素完全一致，可以设置 flex-basis：0 。这将设置flex基础为0，然后任何剩余的空间（这将是所有的空间，因为所有的基础都是0）将根据 flex-grow 按比例分布。 p>

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

这个图从规范做一个很好的说明

和这里是一个工作示例

And here is a working example with your fiddle.

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