Flexbox - równe elementy

Poznajemy bardzo prosty sposób, aby używając flexboxa mieć elementy równej wielkości, niezależnie od ich ilości. Do dzieła.

Ok, tworzymy taki HTML:

<div class="flex-parent">
        <button>Sth</button>
        <button>Short</button>
        <button>Longer 123</button>
        <button>A little longer</button>
        <button>Sth</button>
        <button>Sth else</button>
</div>

Teraz stylujemy sobie flex parent:

.flex-parent {
  display: flex;
  /* flex-wrap: nowrap; */
  /* flex-direction: row; */
  /* flex-flow: row nowrap; */
 }

Domyślnie flex wrap to no-wrap, flex direction to row. Warto też przypomnieć o istnieniu flex-flow, które jest takim skrótem, flex direction + flex wrap.

Ok, teraz nasze dzieci, czyli buttony:

.flex-parent > button {
  flex-basis: 100%;
  /* flex-shrink: 1; */
  /* flex-grow: 0; */
  /* flex: 0 1 100%; */
 }

Flex basis ustawiamy na 100%, przy kierunku row to będzie oznaczać, że początkowo każdy element uzyska 100% width. Domyślnie nie ma flex grow (jest 0) oraz domyślnie flex-shrink ustawione jest na 1.

Teraz cała sztuczka polega na tym, że parent ma nowrap, zaś dzieci shrink 1 oraz taką basis, że mieści się tylko jedna. Gdyby był wrap, to nie mieszczące się elementy byłyby stackowane pod spodem (w sensie praktycznym mielibyśmy column).

Gdyby z kolei wrapa nie było, ale dzieci miały shrink 0, to każdy button zajmowałby 100% width, zaś następny byłby obok niego, mielibyśmy overflow poziomy.

Tego natomiast nie ma. Polecam Firefoxa, do flexboxa w każdym razie. Zobaczmy, co tam się dzieje. Kliknijmy button, po prawej będziemy mieli wypisane po ludzku initial space, negative space, rozmiar wyjściowy:

Wyjściowy rozmiar (flex-basis 100%) : 1800px
Elastyczność (flex-shrink 1): -1500px
Ostateczny rozmiar: 300px

Tak to mniej więcej wygląda. I chyba rozumiemy – width 100% to 1800px. Każdy element dostał początkowo tyle. Gdyby był wrap – wrap poustawiałby je pod spodem, uznając, że nie można zejść poniżej flex basis. Nie byłoby wrapa, ale shrink byłby 0? Byłby overflow poziomy.

Flexbox – równe elementy