Шпаргалка по FLEXBOX // «Фрилансер по жизни»

Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера

Свойства FLEX - контейнера. Применяются для flex-контейнера, обертки flex-элементов

Видеоурок - тут

Свойство display со значениями FLEX\inline-flex

Определяет flex-контейнер, блочный или строчный зависит от переданного значения. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.

block / inline* (по умолчанию) *зависит от тега
flex
inline-flex
inline-flex+ text-align: center; у родителя
1
2
3
4
HTML код: тут
CSS код:
/* родитель */

.block{

}

.block__row{

border: 10px solid #ece89d;

}

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Определяет блочный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display: flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display: inline-flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.

HTML код: тут
CSS код:
/* родитель */

.block{

text-align: center;

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display: inline-flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство flex-wrap

Определяет смогут ли flex-элементы перемещаться на следующие строки когда перестают помещаться внутри flex-контейнера.

nowrap (по умолчанию)
wrap
wrap-reverse
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элементы не смогут перемещаться на следующие строки flex-контейнера

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; width: 170px; flex-wrap:nowrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Значение по умолчанию. Flex-элементы смогут перемещаться на следующие строки flex-контейнера

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; width: 170px; flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Значение по умолчанию. Flex-элементы смогут перемещаться на следующие строки flex-контейнера, но в обратном порядке

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; width: 170px; flex-wrap:wrap-reverse;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство flex-direction

Видеоурок - тут. Устанавливает основную ось, таким образом определяет направление flex-элементов расположенных в flex-контейнере.

row (по умолчанию)
row-reverse
column
column-reverse
1
2
3
4

Значение по умолчанию (не нужно указывать). Основная ось горизонтальная. Все flex-элементы расположаться слева направо по горизонтали

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:row;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Все flex-элементы расположаться справа налево по горизонтали

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:row-reverse;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположаться сверху вниз

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположаться снизу вверх

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column-reverse;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Существует еще свойство flex-flow. Это сокращение для свойств flex-direction и flex-wrap, которые вместе определяют основную и поперечные ось и возможность перемещаться по строкам. По умолчанию row nowrap.

Свойство justify-content

Определяет выравнивание вдоль основной оси (направление завсит от значения свойства flex-direction).

flex-start (по умолчанию)
flex-end
center
space-between
space-around
space-evenly
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элементы прижимаются к началу основной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:flex-start;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы прижимаются к концу основной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:flex-end;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются по центру основной оси

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются равномерно по основной оси .К каждому flex-элементу добавляется пространство слева и справа.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:space-around;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются равномерно по основной оси с одинаковым пространством вокруг них.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:space-evenly;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство align-items

Определяет выравнивание вдоль поперечной оси (направление завсит от значения свойства flex-direction).

stretch (по умолчанию)
flex-start
flex-end
center
baseline
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px; align-items:stretch ;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы прижимаются к началу поперечной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px; align-items:flex-start;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы прижимаются к концу поперечной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px; align-items:flex-end;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются по центру поперечной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px; align-items:center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются по базовой линии.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px; align-items:baseline;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

.block__element_2 .block__content{

font-size: 40px;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойства FLEX - элементов. Применяются для flex-элемента, дочернего объекта flex-контейнера

Видеоурок - тут

Свойство order

Управляет порядком, в котором располагаются flex-элементы внутри flex-контейнера.

По умолчанию
4 2 1 3
2 3 4 1
1
2
3
4

Значение по умолчанию (не нужно указывать).

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

order:1;

}

/* flex-элемент №2 */

.block__element_2{

order:2;

}

/* flex-элемент №3 */

.block__element_3{

order:3;

}

/* flex-элемент №4 */

.block__element_4{

order:4;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

order:3;

}

/* flex-элемент №2 */

.block__element_2{

order:2;

}

/* flex-элемент №3 */

.block__element_3{

order:4;

}

/* flex-элемент №4 */

.block__element_4{

order:1;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

order:4;

}

/* flex-элемент №2 */

.block__element_2{

order:1;

}

/* flex-элемент №3 */

.block__element_3{

order:2;

}

/* flex-элемент №4 */

.block__element_4{

order:3;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство align-self

Переопределяет для конкретного flex-элемента выравнивание вдоль поперечной оси (направление завсит от значения свойства flex-direction). На примере flex-элементов №2 и №4

auto (по умолчанию) как у flex-контейнера
flex-start
flex-end
center
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

/* наследует align-items:stretch; */ align-self:auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

/* наследует align-items:stretch; */ align-self:auto;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы прижимаются к началу поперечной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

align-self:flex-start;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

align-self:flex-start;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы прижимаются к концу поперечной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

align-self:flex-end;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

align-self:flex-end;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элементы располагаются по центру поперечной оси.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; height:150px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

align-self:center;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

align-self:center;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство flex-basis

Определяет размер элемента по умолчанию, до распределения оставшегося пространства. Значения могут быть в процентах пикселях и т.д. На примере flex-элементов №2 и №4

Auto (по умолчанию)
Значение в пикселях
Значение в процентах
1
2й flex-элемент
3
4й flex-элемент

Значение по умолчанию (не нужно указывать). Flex-элемент будет занимать размер в зависимости от контента внутри него.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-basis:auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-basis:auto;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элемент будет занимать размер в зависимости от контента внутри него.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-basis:200px;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-basis:400px;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элемент будет занимать размер в зависимости от контента внутри него.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-basis:20%;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-basis:40%;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство flex-grow

Определяет возможность элемента увеличиваться в размере, при необходимости заполняя весь flex-контейер. 0 запрещено. 1 разрешено. На примере flex-элементов №2 и №4

Запрещено (по умолчанию)
Разрешено
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-grow:0;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-grow:0;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Значение по умолчанию. Flex-элемент увеличится заполняя пространство flex-контейнера

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-grow:1;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-grow:1;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство flex-shrink

Определяет возможность элемента уменьшаться в размере, при необходимости заполняя весь flex-контейер. 0 запрещено. 1 разрешено. На примере flex-элементов №2 и №4

Разрешено (по умолчанию)
Запрещено
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-basis: 200px; flex-shrink:1;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-basis: 300px; flex-shrink:1;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex-basis: 200px; flex-shrink:0;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex-basis: 300px; flex-shrink:0;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Свойство flex. Сокращенная запись для FLEX-GROW FLEX-SHRINK и FLEX-BASIS (рекомендуется)

Определяет возможность элемента уменьшаться и увеличиваться в размере, при необходимости заполняя весь flex-контейер (0 запрещено. 1 разрешено). А так же задает базовый размер . На примере flex-элементов №2 и №4

По умолчанию
Пример №1
Пример №2
Пример №3
1
2
3
4

Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличиваться, может уменьшаться. Базовый размер автоматический

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 0 1 auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex: 0 1 auto;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элемент может увеличиваться, может уменьшаться. Базовый размер автоматический

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex: 1 1 auto;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элемент не может увеличиваться, не может уменьшаться. Базовый размер 200px

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 0 0 200px;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex: 0 0 200px;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4

Flex-элемент может увеличиваться, не может уменьшаться. Базовый размер 50%

HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 0 50%;

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

flex: 1 0 50%;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Практические примеры

Видеоурок - тут

Горизонтальная структура

Примеры построения горизонтальной структуры flex-элементов (колонок)

Три колонки резиновые
Четыре колонки в два ряда
Три колонки Одна большая
Четыре колонки резина + отступы (10px)
Две колонки сайдбар (200px)
1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373; flex: 0 1 33.333%

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373; flex: 0 1 50%

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

flex: 0 1 100%

}

/* flex-элемент №2 */

.block__element_2{

flex: 0 1 50%

}

/* flex-элемент №3 */

.block__element_3{

flex: 0 1 50%

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
4
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

display: flex; margin: 0px -5px;

}

/* flex-элемент */

.block__element{

padding: 0px 5px; flex: 0 1 25%

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

flex: 0 0 200px

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Вертикальная структура

Примеры построения вертикальной структуры flex-элементов (ряды)

Три ряда второй элемент большой
Три ряда по центру
Три ряда раскиданы
1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px; align-items: center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px; justify-content: space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

По центру

Центрируем блок

Пример №1
1
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:center; align-items:center; height: 300px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px; align-items: center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

1
2
3
HTML код: тут
CSS код:
/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px; justify-content: space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}