Flexboxes

#1 display: flex;

Отличная статья с визуальными примерами

Игра для тренировки

#2 Основные свойства для построения сетки

flex-wrap (к флекс-контейнеру/ перенос элементов)
align-items (к флекс-контейнеру/ горизонтальная/главная ось)
justify-content (к флекс-контейнеру/ вертикальная/побочная/поперечная ось)
(трюк с margin-left: auto)
align-self (к флекс-элементу/ горизонтальная/главная ось)
flex-direction (к флекс-контейнеру/ направление)
order (к флекс-элементу/ порядок)

Контейнеру flex-direction: row; (по умолчанию)

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру flex-direction: row; (по умолчанию) + элементу margin-left:auto;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25% margin-left:auto;

Контейнеру flex-direction: row-reverse;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру flex-direction: column;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру flex-direction: column-reverse;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру justify-content: flex-end;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру justify-content: center;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру justify-content: space-between;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру justify-content: space-around;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

Контейнеру: height: 50vh; /flex-direction: column; / align-items: center; / justify-content: space-between;

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

#3 Принцип построения сетки

1 флекс элемент 25%

2 флекс элемент флекс элемент 25%

3 флекс элемент 25%

4 флекс элемент 25%

5 флекс элемент флекс элемент 25%

6 флекс элемент 25%

контент колонки контент колонки контент колонки контент колонки

контент колонки контент колонки контент колонки

контент колонки

контент колонки контент колонки контент колонки контент колонки