it-swarm.com.ru

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

Попытка навигации flexbox, которая имеет до 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;
}
.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>
282
itsclarke

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

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

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

716
James Montagne

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

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

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

7
alexJS