Próba nawigacji flexbox, która ma do 5 elementów i tylko 3, ale nie dzieli jednakowej szerokości między wszystkie elementy.

Skrzypce

Samouczek, po którym modeluję to: 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>

Jest ważny element, który nie jest wspomniany w artykule, z którym się łączyłeś, i to jest flex-basis. Domyślnie flex-basisjest auto.

Ze specyfikacji :

Jeśli określona podstawa elastyczności jest automatyczna, zastosowana podstawa elastyczności jest wartością głównej właściwości rozmiaru elementu elastyczności. (Może to być samo słowo kluczowe auto, które określa rozmiar elementu flex na podstawie jego zawartości).

Każdy element flex ma flex-basiscoś w rodzaju swojego początkowego rozmiaru. Następnie stamtąd pozostała wolna przestrzeń jest rozdzielana proporcjonalnie (na podstawie flex-grow) między przedmioty. Z autotą podstawą jest rozmiar zawartości (lub zdefiniowany rozmiar za pomocą width, itp.). W rezultacie elementy z większym tekstem mają więcej miejsca w twoim przykładzie.

Jeśli chcesz, aby twoje elementy były całkowicie równe, możesz ustawić flex-basis: 0. Spowoduje to ustawienie podstawy elastyczności na 0, a następnie pozostała przestrzeń (która będzie całą przestrzenią, ponieważ wszystkie podstawy są równe 0) zostanie proporcjonalnie rozdzielona na podstawie flex-grow.

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

Ten diagram ze specyfikacji całkiem dobrze ilustruje ten punkt.

A oto działający przykład ze skrzypcami.

Aby utworzyć elementy o równej szerokości za pomocą Flex, należy ustawić na dziecko (elementy elastyczne):

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

Daje wszystkim elementom w rzędzie szerokość 25%. Nie będą rosły i odchodziły jeden po drugim.