Flexbox

jest metodą (zbiorem nowych własciwości) do budowy layoutu wprowadzoną wraz z CSS w wersji 3 (CSS3). Powstał w odpowiedzi na potrzebę pozyskania "narzędzia" do tworzenia układów stron. Do tej pory developerzy (programiści) wykorzystywali do tego różnego rodzaju właściwości elementów (np.

float

), które nie były tworzone z myślą o takim wykorzystaniu.

Podstawą dla podejścia flexbox jest

kontener

, wewnątrz którego zarządzamy elementami i sposobem ich ułożenia. Sposób jego wyświetlania deklarujemy za pomocą właściwości

display

.

Oprócz dotychczasowych właściwości (

block

,

inline

,

none

, ...) doszły 2 nowe wartości:

-

flex

jest to blokowy typ kontenera, który zajmuje zawsze 100% dostępnej szerokości,

-

inline-flex

jest to kontener liniowy, czyli zajmuje tyle przestrzeni ile potrzebuje by wyświetlić zawartość.

Elementy HTML z powyższymi wartościami dają możliwość zarządzania elementami zagnieżdżonymi w nim wg podejścia Flexbox.

Model Flexbox

został stworzony właśnie z myślą o budowie szkieletów (układów) stron www.

<div class="hero">

        <h1>Basic layout</h1>

    </div>

    <div class="main-container">

        <h2>Exercise</h2>

        <div class="container">

        <div class="header"></div>

        <div class="sidebar"></div>

        <div class="content"></div>

        <div class="footer"></div>



        </div>

        Czas na właściwości kontenera.

Chcemy żeby wyświetlał się jako element blokowy i pozwalał na użycie flexbox. Wykorzystamy do tego wartość

flex

z poprzednich lekcji, przypisaną do właściwości

display

. Sprawia ona, że elementy wewnątrz kontenera są traktowane jako elastyczne obiekty w ramach modelu flexbox.

Drugą, istotną dla nas właściwością, będzie

flex-wrap

. Domyślnie ma wartość

nowrap

co oznacza że wiersze nie są zawijane. Co za tym idzie wszystkie elementy są wyświetlane jednym ciągiem (w poziomie lub pionie), bez "łamania" linii.

Jeżeli ustawimy

flex-wrap: wrap;

, elementy będą przenoszone do kolejnego wiersza, jeżeli będzie to konieczne.