Подать заявку
02.03.2018

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

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

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

Примеры:

Без flexbox

1
2
3

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

.flex__wrp {
    display: flex;
}
1
2
3

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

flex-direction

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

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

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

Примеры:

flex-direction: row;

1
2
3

flex-direction: column;

1
2
3

flex-direction: row-reverse;

1
2
3

flex-direction: column-reverse;

1
2
3

flex-wrap

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

Пример:

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

1
2
3

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

1
2
3

justify-content

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

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

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

Примеры:

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

align-items

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

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

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

Примеры:

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

align-content

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

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

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

Примеры:

stretch

1
2
3
1
2
3
1
2
3

flex-start

1
2
3
1
2
3
1
2
3

flex-end

1
2
3
1
2
3
1
2
3

center

1
2
3
1
2
3
1
2
3

space-between

1
2
3
1
2
3
1
2
3

space-around

1
2
3
1
2
3
1
2
3

space-evenly

1
2
3
1
2
3
1
2
3

order

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

Пример:

order

1 order: 2;
2 order: 1;
3 order: 3;
Назад в раздел