Czym jest Flexbox?

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 44 z 76.

W CSS układ Flexbox to potężne narzędzie, które zapewnia wydajny sposób wyrównywania elementów w kontenerze i rozdzielania między nimi przestrzeni. Dzięki Flexbox możesz kontrolować wyrównanie, kierunek, kolejność i rozmiar elementów w kontenerze, tworząc elastyczne i dynamiczne układy, które dostosowują się do różnych rozmiarów ekranów i urządzeń.

Aby używać Flexboxa, najpierw musisz zdefiniować kontener flex. Robi się to, ustawiając właściwość display elementu na flex lub inline-flex. Po utworzeniu kontenera flex jego bezpośrednie elementy potomne automatycznie stają się elementami flex.

Oto podstawowa składnia tworzenia kontenera flex:

.container {
    display: flex;
}

display: flex;: Ta deklaracja zmienia wybrany element w kontener flex, a jego bezpośrednie elementy potomne w elementy flex.

Gdy masz już kontener flex, możesz użyć różnych właściwości Flexbox, aby kontrolować układ jego elementów flex. Do najczęściej używanych właściwości należą:

flex-direction: Określa kierunek elementów flex (row, column, row-reverse, column-reverse).
justify-content: Wyrównuje elementy flex wzdłuż osi głównej (np. flex-start, flex-end, center, space-between, space-around).

align-items: Wyrównuje elementy flex wzdłuż osi poprzecznej (np. flex-start, flex-end, center, baseline, stretch).
flex-wrap: Określa, czy elementy flex powinny zawijać się do wielu wierszy (wrap, nowrap, wrap-reverse).
align-content: Wyrównuje wiersze flex, gdy wzdłuż osi poprzecznej jest dodatkowa przestrzeń (podobnie jak justify-content, ale dla wielu wierszy).

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z elementem div (<div>), który zawiera trzy podrzędne elementy div (<div>). Twoim zadaniem jest użycie właściwości display: flex;, aby przekształcić nadrzędny element div w kontener flex. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą container.
Ustaw właściwość display elementu .container na flex.

Spróbuj swoich sił

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>