Flexbox — kontener i oś główna
display:flex, justify-content, align-items, gap
Flexbox — elastyczny kontener
Wyobraź sobie tacę z talerzami. Ty decydujesz: ułożyć talerze w rzędzie od lewej do prawej, w kolumnie od góry do dołu, czy równomiernie rozłożyć na tacy. A talerze mogą mieć różne rozmiary — ale zawsze się zmieszczą. Flexbox to ta taca: ty ustawiasz reguły, a przeglądarka rozmieszcza elementy.
Jak włączyć Flexbox
Dodaj display: flex do kontenera (elementu nadrzędnego). Wszystkie bezpośrednie elementy podrzędne stają się elementami flex.
.container {
display: flex;
}<div class="container">
<div>1</div>
<div>2</div> <!-- to są elementy flex -->
<div>3</div>
</div>flex-direction — oś główna
flex-direction: row; /* → od lewej do prawej (domyślnie) */
flex-direction: row-reverse; /* ← od prawej do lewej */
flex-direction: column; /* ↓ od góry do dołu */
flex-direction: column-reverse;/* ↑ od dołu do góry */justify-content — wyrównanie wzdłuż OSI GŁÓWNEJ
justify-content: flex-start; /* ← wszystkie do lewej (domyślnie) */
justify-content: center; /* || wyśrodkowane */
justify-content: flex-end; /* → wszystkie do prawej */
justify-content: space-between; /* |el el el| równe odstępy między */
justify-content: space-around; /* | el el el | odstępy wokół każdego */
justify-content: space-evenly; /* | el el el | równe odstępy wszędzie */align-items — wyrównanie wzdłuż OSI POPRZECZNEJ
align-items: stretch; /* rozciągnięte do pełnej wysokości (domyślnie) */
align-items: center; /* wyśrodkowane pionowo */
align-items: flex-start; /* do góry */
align-items: flex-end; /* do dołu */gap zastępuje margin między elementami flex — znacznie wygodniejsze. flex: 1 1 300px — skrót dla flex-grow flex-shrink flex-basis.
Aby wyśrodkować element — display: flex + justify-content: center + align-items: center. To najprostszy sposób centrowania w CSS, który w końcu nadszedł po 20 latach obejść.