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

问题描述

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

小提示

我正在建模的教程是 / a>

SASS

  * {
字体-size：16px; 
} 
 .tabs {
 max-width：1010px; 
 width：100％; 
 height：5rem; 
 border-bottom：solid 1px gray; 
 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 =activedata-tab =1>披萨< / li> 
< li data-tab =2>鸡肉汤< / li> 
< li data-tab =3>花生酱< / li> 
< li data-tab =4>鱼< / li> 
< / ul> 
< / div> 
  

解决方案

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

从规格：

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

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

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

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

这个图从规范做一个很好的说明的要点。 p>

和这里是一个工作示例与你的小提琴。

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;

    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>

解决方案

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