Flexbox не дает равную ширину элементам

Попытка flexbox nav, которая имеет до 5 элементов и всего лишь 3, но не делит ширину поровну между всеми элементами.

Fiddle

Учебное пособие, в котором я моделирую это, 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:"";
                }
            }
        }
    }

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

Ответ 1

Существует важный бит, который не упоминается в статье, с которой вы связаны, и которая flex-basis. По умолчанию flex-basis есть auto.

Из спецификация:

Если указанная гибкая основа является автоматической, используемая основа flex является значением свойства основного размера flex items. (Это может быть само ключевое слово auto, которое определяет размер элемента flex на основе его содержимого.)

Каждый элемент гибкости имеет flex-basis, который похож на его начальный размер. Затем оттуда любое оставшееся свободное пространство распределяется пропорционально (на основе flex-grow) среди предметов. С auto этот базис представляет собой размер содержимого (или определенный размер с width и т.д.). В результате элементы с большим текстом внутри дают больше места в вашем примере.

Если вы хотите, чтобы ваши элементы были полностью четными, вы можете установить flex-basis: 0. Это установит основу flex равным 0, а затем любое оставшееся пространство (которое будет всем пространством, так как все базовые значения равны 0) будет пропорционально распределено на основе flex-grow.

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

Эта диаграмма из спецификации дает неплохую иллюстрацию этой точки.

И вот рабочий пример с вашей скрипкой.

Ответ 2

Чтобы создать элементы с равной шириной с помощью Flex, вы должны установить для своего ребенка (гибкие элементы):

flex-grow: 0;

flex-basis: 25%;

Это даст всем элементам ширину строки 25%. Они не будут расти и идти один за другим.