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

118

Попытка 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>
Теги:
flexbox

2 ответа

330
Лучший ответ

Существует важный бит, который не упоминается в статье, с которой вы связаны, и которая 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;
    /* ... */
}

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

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

Поделиться
  • 3
    Это руины для меня на сафари.
  • 41
    Удивительная вещь в этом ответе состоит в том, что вы объясняете flex-base с помощью этого примера лучше, чем где-либо еще, буквально во всем Интернете. Я собираюсь связаться с MIT, чтобы дать вам почетное звание профессора.
Показать ещё 2 комментария
1

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

flex-grow: 0;

flex-basis: 25%;

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

Поделиться
  • 50
    Это довольно неловко, так как оно полностью уменьшает выгоду от flex. Если вы собираетесь жестко закодировать размеры столбцов, есть более простые способы решения проблем.
  • 3
    это совсем не так ... если вы хотите иметь коробки одинаковой длины и разбивать их, когда ряд полностью занят ... вы можете легко добиться этого следующим образом. Может быть установлен также минимальная ширина, если вам нужна минимальная ширина
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню