Żeby poprawnie stosować reguły wyświetlania elastycznego, trzeba najpierw przygotować duży pojemnik, któremu nadamy regułę "display: flex" w CSSie. Trzeba też wskazać kierunek układania się elementów-dzieci tego pojemnika, a samym elementom-dzieciom przypisać zachowanie wewnątrz pojemnika.

Najciemniejszy niebieski kolor to kolor tła, ma oddzielić od siebie kolejne pojemniki o różnych regułach. Pośredni kolor wydziela pojedyncze pojemniki, a najjaśniejszy niebieski to klocki wewnątrz pojemników.

Każdy pojedynczy pojemnik ma ustawione w CSSie "display: flex".

Małe klocki nie mają ustawionej żadnej specjalnej reguły typu "float". Mają jedynie określone wymiary i niewielki odstęp poprzez margines zewnętrzny, oraz wycentrowanie tekstu w pionie, dzięki połączeniu marginesu wewnętrznego "padding" z pomniejszeniem wysokości (patrz notatka "Margin vs. Padding).

W tym pojemniku, klocki układają się rzędami i zawijają do nowej linii, gdy zabraknie im miejsca, dzięki regule "flex-direction:row".


1
2
3
4
5
6
7

W tym pojemniku, klocki układają się w kolumnę, dzięki "flex-direction: column".


1
2
3
4
5
6
7

Pojemnikom można ustawiać różne wartości odnośnie rozmieszczenia elementów-dzieci w środku, zarówno w poziomie, jak i w pionie.

Służy do tego reguła "justify-content:"

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

space-between

1
2
3

space-around

1
2
3

space-evenly

1
2
3

Można też zmieniać ustawienia zachowania w pionie poprzez "align-items:"

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

Reguły można oczywiście łączyć: tutaj wycentrowano klocki w obu osiach.

1
2
3