Шпаргалка по Flexbox

Ділюсь технічними навичками та уроками з HTML-верстки.

 Анімоване ім'я

Flexbox

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

Корисні посилання

Властивості Flex-контейнера. Застосовуються для flex-контейнера, обгортки flex-елементів.

Відеоурок - тут.

Властивість display зі значеннями flex/inline-flex

Визначає flex-контейнер, блоковий або рядковий залежить від переданого значення. Перетворює всі свої прямі, дочірні елементи у flex-елементи.

1
2
3
4

HTML код: тут

CSS код:

/* батько */

.block{

}

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px solid #ece89d; display: inline-flex;

}

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

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

Властивість flex-wrap

Визначає, чи зможуть flex-елементи переміщатися на наступні рядки, коли перестають поміщатися всередині flex-контейнера.

1
2
3
4

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

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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-контейнері.

1
2
3
4

Значення за замовчуванням (не потрібно вказувати). Основна вісь горизонтальна. Усі flex-елементи розташуються зліва направо по горизонталі.

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px solid #ece89d;

display: flex;

flex-direction: column-reverse;

}

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

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

Властивість justify-content

Визначає вирівнювання вздовж основної осі (напрямок залежить від значення властивості flex-direction).

1
2
3
4

Значення за замовчуванням (не потрібно вказувати). Flex-елементи притискаються до початку основної осі.

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px 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: 15px 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: 15px solid #ece89d;

display: flex;

justify-content: space-evenly;

}

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

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

Властивість align-items

Визначає вирівнювання вздовж поперечної осі (напрямок залежить від значення властивості flex-direction).

1
2
3
4

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

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px 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: 15px solid #ece89d;

display: flex;

height: 150px;

align-items: baseline;

}

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

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

Icon

Існує ще властивість flex-flow. Це скорочення для властивостей flex-direction і flex-wrap, які разом визначають основну і поперечні осі і можливість переміщатися по рядках. За замовчуванням row nowrap.

Властивості Flex-елементів. Застосовуються для flex-елемента, дочірнього об'єкта flex-контейнера

Відеоурок - тут.

Властивість order

Керує порядком, у якому розташовуються flex-елементи всередині flex-контейнера.

1
2
3
4

Значення за замовчуванням (не потрібно вказувати).

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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.

1
2
3
4

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

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px 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.

1
2й flex-елемент
3
4й flex-елемент

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

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px 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: 15px 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: 15px solid #ece89d; max-width: 400px;

display: flex;

}

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

.block__element{

border: 5px solid #5e5373;

}

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

.block__element_1{

}

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

.block__element_2{

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

}

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

.block__element_3{

}

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

.block__element_4{

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

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

1
2
3
4

Flex-елемент не може зменшуватись.

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px solid #ece89d; max-width: 400px;

display: flex;

}

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

.block__element{

border: 5px solid #5e5373;

}

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

.block__element_1{

}

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

.block__element_2{

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

}

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

.block__element_3{

}

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

.block__element_4{

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

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

Властивість flex. Скорочений запис для flex-grow, flex-shrink і flex-basis (рекомендується)

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

1
2
3
4

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

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px 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-елементів (колонок).

1
2
3

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

border: 15px 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: 15px 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: 15px 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: 15px 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: 15px 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: 15px 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: 15px 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

HTML код: тут

CSS код:

/* батько */

.block{

}

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

.block__row{

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

}

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

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс інші стилі для тексту, відступи */

}

ArrowПовернутися назад
Star

№17

Уроки HTML CSS JS

Flexbox. Вчимося верстати на флексах

Гнучкий Flexbox. властивості flex-контейнера

Flexbox. Вчимося верстати на флексах

Шпаргалка є доповненням до плейлиста:

Logo