Flexbox不给元素以相同的宽度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (73)

尝试一个有多达5项和最小3项的柔性盒导航,但它并不是在所有元素之间均分宽度。

  * {
        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:"";
                }
            }
        }
    }
<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-basisauto

如果指定的FLEXBASE是AUTO,则使用的FLEXBase是FLEX项的Main Size属性的值。(这本身可以是关键字AUTO,它根据其内容对FLEX项进行大小调整。)

每个Flex项都有一个flex-basis有点像它的初始大小。然后,从那里开始,任意剩余的自由空间按比例分布(基于flex-grow)在这些项目中。带着auto,该基础是内容大小(或定义为width等等)。因此,在您的示例中,具有更大文本的项目将被给予更大的空间。

如果希望元素完全平衡,则可以设置flex-basis: 0。这将将弹性基设置为0,然后任何剩余的空间(因为所有的基都是0)将按比例分布。flex-grow

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}
用户回答回答于

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

挠曲生长:0;

弹性基础:25%;

它将给予行25%宽度中的所有元素。他们不会一个一个地长出来。

扫码关注云+社区