Układy z wykorzystaniem Flex-box

Można zrezygnować z floatów do rozmieszczania i układania elementów w CSS ):

Dzięki Flex można łatwiej przygotować responsywny układ strony bez konieczności używania float i position.

Przede wszystkim należy zdefiniować flex pojemnik (container), i elementy, które znajdą się wewnątrz (flex items),

Struktura

Konieczne są: pojemnik zewnętrzny i wewnętrzne elementy, które będą układane flexem.

Pojemnik musi mieć display wybrane na flex i wtedy każdy element, który się w nim znajdzie automatycznie będzie podlegał ustawieniom flex.

Dodatkowe opcje to:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Układy pionowe i poziome, kolejność elementów

flex-direction

flex-direction: column

flex-direction:column — Elementy wewnętrzne układają się pionowo, tak jak elementy blokowe, w takiej kolejności jak są wpisane w html.

flex-direction: column-rewerse

flex-direction:column-rewerse — Elementy wewnętrzne układają się pionowo, tak jak elementy blokowe, ale w odwrotnej kolejności

flex-direction row i row-reverse

flex-direction:row i row-rewerse — Elementy wewnętrzne układają się poziomo (in-line), odpowiednio w 1 rzędzie po kolei row, a w drugim,
w odwrotnej kolejności: row-rewerse.

Flex-wrap

Flex-wrap: wrap

flex-wrap:wrap — Elementy wewnętrzne przy zmianie rozmiaru strony zawijają się wrap czyli tworzą się kolejne wiersze w układzie: row, na ekranie standardowym 3 kolumny

flex-wrap:wrap — Elementy wewnętrzne przy zmianie rozmiaru strony zawijają się wrap czyli tworzą się kolejne wiersze w układzie: row, na mniejszym 2

flex-wrap:wrap — Elementy wewnętrzne przy zmianie rozmiaru strony zawijają się wrap czyli tworzą się kolejne wiersze w układzie: row, na urządzeniach mobilnych 1 element w wierszu

flex-wrap: nowrap (ustawienie domyślne)

flex-wrap:nowrap — Elementy wewnętrzne przy zmianie rozmiaru strony nie zawijają się nowrap czyli nie tworzą kolejnych wierszy i wyświetlają się tylko te, które mieszczą się w oknie.

Flex-flow

Jest to jednowierszowa, krótsza forma zapisu dla obu parametrów, tzn. flex-direction i flex-wrap.

flex-flow: row wrap

flex-flow:row wrap — Elementy wewnętrzne ustawiają się w wierszu in-line i w mniejszych rozmiarach okna zawijają się tworząc kolejne wiersze i redukując liczbę kolumn

flex-flow:row wrap — Elementy wewnętrzne ustawiają się w wierszu in-line i w mniejszych rozmiarach okna zawijają się tworząc kolejne wiersze i redukując liczbę kolumn

flex-flow:row wrap — Elementy wewnętrzne ustawiają się w wierszu in-line i w mniejszych rozmiarach okna zawijają się tworząc kolejne wiersze i redukując liczbę kolumn

Wyrównanie wszystkich elementów w pojemniku

Justify-content (wyrównanie w poziomie)

justify-content: center

justify-content: center — Środek w poziomie

justify-content: flex-start — Środek w poziomie

Darmowe lekcje multimedialne

Harmonogram zajęć w największych miastach

Certyfikaty

Sprawdź Swój Certyfikat

Informacje

Artykuły

Valid

Icons from Glyphicons Free, licensed under CC BY 3.0.