CSS Flexbox основы c примерами

Использование flexbox

Flexbox применяется не к самим элементам, которые необходимо сгруппировать а к содержащему их контейнеру. Для этого необходимо задать ему css свойство display: flex;.

Примеры:

Без flexbox

С использованием flexbox

.flex__wrp {
    display: flex;
}

Если необходимо чтобы flexbox контейнер был inline элементом (строчным), то следует использовать свойство display: inline-flex;.

flex-direction

Элементам можно задать также направление размещения. Для этого используется свойство flex-direction.

У свойства может быть 4 параметра

• row - отображение строкой (используется по умолчанию)
• column - отображение столбцом
• row-reverse - строка в обратном направлении
• column-reverse - столбец в обратном направлении

Примеры:

flex-direction: row;

flex-direction: column;

flex-direction: row-reverse;

flex-direction: column-reverse;

flex-wrap

Элементы в контейнере изначально выстраиваются в 1 линию, что может влиять на их размер. Для того чтобы этого избежать используется свойство flex-wrap: wrap;.

Пример:

Дефолтное значение flex-wrap: nowrap;

Используем flex-wrap: wrap;

justify-content

Для группировки элементов можно использовать свойство justify-content.

У свойства может быть 6 параметров

• flex-start - элементы у левого края контейнера (используется по умолчанию)
• flex-end - элементы у правого края контейнера
• center - элементы по центру
• space-between - элементы на всю длину контейнера, между ними равное расстояние
• space-around - элементы на всю длину контейнера, вокруг них равное расстояние
• space-evenly - элементы на всю длину контейнера, между ними и стенками контейнера равное расстояние

Примеры:

flex-start

flex-end

center

space-between

space-around

space-evenly

align-items

Для выбора расположения элементов по оси отличной от основной используют свойство align-items.

Рассмотрим 3 основных параметра

• flex-start - элементы у верхнего края контейнера (используется по умолчанию)
• flex-end - элементы у нижнего края контейнера
• center - элементы по центру

Примеры:

flex-start

flex-end

center

align-content

Для выравнивания элементов в контейнере используется свойство align-content.

У свойства может быть 7 параметров

• stretch - элементы занимают весь объем контейнера (используется по умолчанию)
• flex-start - элементы у верхнего края контейнера
• flex-end - элементы у нижнего края контейнера
• center - элементы по центру
• space-between - между элементами равное расстояние
• space-around - вокруг элементами равное расстояние
• space-evenly - между элементами и стенками контейнера одинаковое расстояние

Примеры:

stretch

flex-start

flex-end

center

space-between

space-around

order

Для того чтобы "вручную" расположить элементы в нужном порядке используют свойство order. В отличие от всех вышеперечисленных, оно присваивается не контейнеру, а самому элементу. В качестве параметра используется число, соответствующее необходимому порядковому номеру элемента.

Пример:

order