Flexbox CSS

Підтримка браузера

Технологія flexbox підтримуються у всіх сучасних браузерах.

Browser SVGБраузерБраузер SVGБраузерБраузер
29.011.022.01048

Елементи Flexbox

Щоб почати використовувати технологію Flexbox, потрібно спочатку визначити flex-контейнер.

See the Pen Елементи Flexbox by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Наведений вище елемент являє собою flex-контейнер (синя область) з трьома flex елементами.

Батьківський елемент (flex-контейнер)

Щоб створити flex-контейнер, йому потрібно прописати властивістьdisplay flex :

.flex-container {
  display: flex;
}

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

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

Властивість flex-direction flexbox

Приклад(flex-direction: column;)
Всі елементи flex-контейнеру будуть розташовані вертикально в стовпчик(зверху вниз):

See the Pen flexDirection column by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(flex-direction: column-reverse;)
Всі елементи flex-контейнеру будуть розташовані вертикально в зворотньому порядку(знизу доверху):

See the Pen flex-direction: column-reverse by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(flex-direction: row;)
Всі елементи flex-контейнеру будуть розташовані гризонтально (зліва направо):

See the Pen flex-direction: row; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(flex-direction: row-reverse;)
Всі елементи flex-контейнеру будуть розташовані гризонтально в зворотньому порядку (справа наліво):

See the Pen flex-direction: row-reverse; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

Властивість flex-wrapвизначає, чи будуть flex-елементи переноситися.

Наведені нижче приклади містять 12 flex-елементів, які добре демонструють дану властивість.

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

Приклад(flex-wrap: wrap;)
Всі елементи flex-контейнеру будуть переноситися, якщо це необхідно:

See the Pen flex-wrap: wrap; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(flex-wrap: nowrap;)
Всі елементи flex-контейнеру не будуть переноситися(за замовчуванням):

See the Pen flex-wrap: nowrap; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(flex-wrap: wrap-reverse;)
Всі елементи flex-контейнеру будуть переноситися у зворотному порядку:

See the Pen flex-wrap: wrap-reverse; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

Властивістьflex-flow дозволяє записатиflex-directionі flex-wrapвластивості одночасно.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

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

Властивістьjustify-content використовується для вирівнювання flex-елементів по горизонталі:

Приклад(justify-content: center;)
Всі елементи flex-контейнеру будуть вирівнюватися по центру по горизонталі:

See the Pen justify-content: center; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(justify-content: flex-start;)
Всі елементи flex-контейнеру будуть вирівнюватися спочатку контейнера по горизонталі(за замовчуванням):

See the Pen justify-content: flex-start; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(justify-content: flex-end;)
Всі елементи flex-контейнеру будуть вирівнюватися в кінці контейнера по горизонталі:

See the Pen justify-content: flex-end; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(justify-content: space-around;)
Всі елементи flex-контейнеру будуть вирівнюватися по горизонталі і між ними буде однакова відстань:

See the Pen justify-content: space-around; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(justify-content: space-between;)
Всі елементи flex-контейнеру будуть вирівнюватися по горизонталі і між ними буде однакова відстань, але на відмінно від space-around крайні блоки завжди будуть прилипати до країв flex-контейнеру:

See the Pen justify-content: space-between; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

Властивістьalign-items використовується для вирівнювання flex-елементів по вертикалі.

У даних прикладах ми використовуємо контейнер висотою в 200 пікселів, щоб краще продемонструвати властивість align-items.

Приклад(align-items: center;)
Всі елементи flex-контейнеру будуть вирівнюватися по вертикалі і по центру:

See the Pen align-items: center; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(align-items: flex-start;)
Всі елементи flex-контейнеру будуть вирівнюватися по вертикалі зверху:

See the Pen align-items: flex-start; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(align-items: flex-end;)
Всі елементи flex-контейнеру будуть вирівнюватися по вертикалі знизу:

See the Pen align-items: flex-end; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(align-items: stretch;)
Всі елементи flex-контейнеру будуть вирівнюватися по вертикалі по всій висоті:

See the Pen align-items: stretch; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(align-items: baseline;)
Всі елементи flex-контейнеру будуть вирівнюватися по вертикалі по базовій лінії:

See the Pen align-items: baseline; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

Примітка: у прикладі використовується інший розмір шрифту, щоб продемонструвати, що елементи вирівнюються за текстовою базовою лінією:

align

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

Властивістьalign-content використовується для вирівнювання рядів flex-контейнера.

Flexbox CSS

У даних прикладах ми використовуємо контейнер з висотою 600 пікселів, з властивістю flex-wrap: wrap, щоб краще продемонструвати кінцевий результат.

Приклад(align-content: space-between;)
Всі рядки flex-контейнеру будуть вирівнюватися по вертикалі з однаковою відстанню між ними, але крайні ряди будуть прилипати до країв flex-контейнера:

See the Pen align-content: space-between; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(align-content: space-around;)
Всі рядки flex-контейнеру будуть вирівнюватися по вертикалі з однаковою відстанню між ними:

See the Pen align-content: space-around; by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Дочірні елементи

Безпосередні дочірні елементи flex-контейнерів стають автоматично flex-елементами.

See the Pen Флекс-елементи by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

Сині елементи є flex-елементами всередниі сірого flex-контейнера.

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

Властивістьorder визначає порядок flex-елементів.

Приклад(order)
За допомогоюу властивості order можна змінити порядок flex-елементів:

See the Pen Порядок елементів by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

Властивістьflex-grow визначає , на скільки більший один flex-елемент буде за інший. Значення має бути числом,. за замовчуванням – 0.

Приклад(flex-grow)
Третій елемент буде у 8 разів більший ніж інші елементи:

See the Pen flex-grow by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

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

Приклад(flex-shrink)
Третій елемент, при зменшенні вікна браузера, не буде змінювати свої розміри:

See the Pen flex-shrink by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

Властивістьflex-basis визначає початкову довжину flex-елемента.

Приклад(flex-basis)
Початкова довжина 3-го елемента буде 200 пікселів:

See the Pen flex-basis by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

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

Властивістьflex використовується для скороченого запису flex-growflex-shrinkі flex-basisвластивостей.

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

Властивістьalign-self задає вирівнювання для обраного елемента всередині flex-контейнера.

Властивістьalign-self  перевизначає вирівнювання align-items для flex-контейнера.

У даних прикладах ми використовуємо контейнер висотою 200 пікселів, щоб краще продемонструвати align-selfвластивість.

Приклад(align-self)
Вирівнювання 3-го елемента всередині контейнера по центру:

See the Pen align-self by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Приклад(align-self)
Вирівнювання 2-го елементу вверху контейнера, а 3-го внизу:

See the Pen align-self: flex-start by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Сітка зображень Image Grid за допомогою Flexbox

Адаптивна галерея зображень за допомогою Flexbox

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/css/css3_flexbox.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: