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

368

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

скрипка

Учебное пособие, которое я моделирую после этого: 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;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul 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;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li: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>

itsclarke
источник
1
задайте минимальную ширину для вашей таблицы, и установка отступов с использованием блоков vw может помочь: jsfiddle.net/2nY9N/2 отбросьте flex-grow и просто выполните flex: 1; он будет использовать значения по умолчанию для 2 других свойств
G-Cyrillus

Ответы:

908

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

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

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

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

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

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

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

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

Джеймс Монтань
источник
3
Это руины для меня на сафари.
Снеговик
77
Удивительная вещь в этом ответе состоит в том, что вы объясняете flex-base с помощью этого примера лучше, чем где-либо еще, буквально во всем Интернете. Я собираюсь связаться с MIT, чтобы дать вам почетное звание профессора.
dudewad
96
Просто говоря уже о том , что flex: 1;это сокращение для комбинации flex-grow: 1, flex-basis: 0.
Вадим Овчинников
1
На всякий случай, если кто-то захочет узнать подробности, я наткнулся на эту замечательную статью в Интернете: css-tricks.com/flex-grow-is-weird
Kuldeep Kumar
О, чувак, всегда бьет меня по голове, когда я думаю, что понял CSS.
ibic
15

Чтобы создать элементы с одинаковой шириной Flex, вы должны установить дочерний элемент (flex elements):

flex-basis: 25%;
flex-grow: 0;

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

alexJS
источник
77
Это довольно неловко, так как полностью уменьшает выгоду от flex. Если вы собираетесь жестко кодировать размеры столбцов, есть более простые способы решения проблем.
Kloar
3
это совсем не так ... если вы хотите иметь коробки одинаковой длины и разбивать их, когда ряд полностью занят ... вы можете легко добиться этого следующим образом. Может быть, установите также минимальную ширину, если вам нужна минимальная ширина
Иларио Энглер
1
@Kloar Вы говорите, что, как будто это единственное преимущество флексбоксов ... Они, безусловно, могут быть полезны, когда вам нужна одинаковая ширина, например, для отзывчивости. Кроме того, это не так, как флексбоксы не так просто?
user2999349