Адаптируемых блоков не давая одинаковой ширины элементов


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

Скрипка

учебник я моделирую это после того, как http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

Сасс

* {
  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>
2 207

2 ответа:

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

С спец:

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

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

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

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

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

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

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

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

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