Flexbox CSS
1
2
3
4
5
6
7
8
Moduł układu CSS Flexbox
Przed modułem Flexbox Layout istniały cztery tryby układu:
- Blokuj dla sekcji na stronie internetowej
- W tekście, na tekst
- Tabela, dla dwuwymiarowych danych tabeli
- Pozycjonowane, dla wyraźnej pozycji elementu
Moduł Flexible Box Layout ułatwia projektowanie elastycznej, responsywnej struktury układu bez użycia pływaka lub pozycjonowania.
Obsługa przeglądarki
Właściwości flexbox są obsługiwane we wszystkich nowoczesnych przeglądarkach.
29.0 | 11.0 | 22.0 | 10 | 48 |
Elementy Flexbox
Aby zacząć korzystać z modelu Flexbox, musisz najpierw zdefiniować elastyczny kontener.
1
2
3
Powyższy element reprezentuje kontener flex (niebieski obszar) z trzema elementami flex.
Przykład
Elastyczny kontener z trzema elastycznymi elementami:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
W kolejnych rozdziałach dowiesz się więcej o elastycznych kontenerach i elastycznych elementach.