CSS Flexbox дозволяє легко форматувати HTML, як ніколи раніше не знали, що це можливо. За допомогою Flexbox ви можете легко вирівнювати вертикально та горизонтально. Подобається звук цього? Так, я теж.
Flexbox також надзвичайно корисний при створенні загального макета веб-сайту чи програми. Це легко вивчити, добре підтримується (у всіх сучасних браузерах), і з ним чудово працювати - не кажучи вже про те, що для отримання основ не потрібно багато часу.
Тож давайте зануримось прямо і дізнаємось більше.
Flexbox
Ось перелік властивостей Flexbox, які можна використовувати для позиціонування елементів у CSS:
CSS, який можна застосувати до контейнера
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: || justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;CSS, який можна застосувати до елементів / елементів у контейнері
order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: | auto; /* default auto */ flex: none | [ ? || ] align-self: auto | flex-start | flex-end | center | baseline | stretch;Отже, тепер у вас є ваш інструментарій. Але ви можете запитати: "Що я роблю зі своїми інструментами і як я ними користуюся?" Ну, дозвольте, я вам покажу.
Дисплей Flex
display: flex;просто каже вашому браузеру: "Гей, я хотів би використовувати Flexbox з цим контейнером, будь ласка." Це ініціює це поле як контейнер Flex і застосовує деякі властивості Flex за замовчуванням.
Ось так виглядає наш контейнер без display: flex;:
Після додавання display: flex;ми отримуємо нижче - ви бачите, що застосовуються властивості Flex за замовчуванням, змушуючи це виглядати так:
Напрямок гнучкості
flex-direction:дозволяє нам контролювати, як відображаються елементи в контейнері. Ви хочете, щоб вони були зліва направо, справа наліво, зверху вниз або знизу вгору? Ви можете зробити все це легко, встановивши напрямок Flex контейнера.
Flexbox застосовує рядки як типові для напрямку. Ось як вони всі виглядають:
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flex Wrap
Flexbox за замовчуванням намагатиметься вмістити всі елементи в один рядок. Але ви можете змінити це за допомогою властивості flex-wrap. Це дозволяє вибрати, розливатимуться елементи чи ні.
Є 3 властивості для flex-wrap::
flex-wrap: nowrap є типовим і намагатиметься вмістити все в один рядок зліва направо.
flex-wrap: wrap дозволяє елементам продовжувати створювати кілька рядків зліва направо.
flex-wrap: wrap-reverse дозволяє розміщувати елементи у декількох рядках, але цього разу відображається справа наліво.
Flex Flow
Flex потоку поєднує в собі використання flex-wrapі flex-directionв одну властивість. Він використовується, спочатку встановлюючи напрямок, а потім обгортання.
flex-flow: column wrap; є прикладом того, як цим користуватися.
Обґрунтуйте зміст
justify-content - це властивість, яка вирівнює елементи в контейнері вздовж основної осі (це змінюється залежно від способу відображення вмісту).
Для цього існує кілька варіантів. Це дозволяє нам заповнювати будь-який порожній простір у рядках, але дозволяє визначити, як ми хочемо це "виправдати".
Ось наші варіанти , коли ми виправдовуємо наше зміст: flex-start | flex-end | center | space-between | space-around;.
Вирівняти елементи
Вирівняти елементи дозволяє нам вирівняти елементи вздовж поперечної осі. Це дозволяє розміщувати вміст різними способами з використанням виправданого вмісту та вирівнює елементи між собою.
align-items: flex-start | flex-end | center | baseline | stretch;
Вирівняти вміст
Це призначено для вирівнювання елементів за кількома рядками. Він призначений для вирівнювання по поперечній осі і не вплине на вміст, що складається з одного рядка.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Інші ресурси на Flexbox та Grid
Статті та курси
Кінцева таблиця CSS Flex
Повний відео-курс CSS (включає Flexbox та Grid)
Візуальне керівництво по CSS Flexbox
Як створити галерею зображень за допомогою CSS Grid
Ігри та програми
Flexbox Defense - це веб-гра, яка навчає flexbox цікавого способу.
Flexbox Froggy - це також веб-гра, яка навчає flexbox цікавого способу.
Flexbox in 5 - це веб-програма, яка дозволяє побачити, як працює flexbox, за допомогою кількох простих елементів управління.
Flexyboxes - це програма, яка дозволяє переглядати зразки коду та змінювати параметри, щоб побачити, як flexbox працює візуально.
Flexbox Patters - це веб-сайт, який демонструє безліч прикладів flexbox.
Відео
Основи Flexbox
Практичні приклади Flexbox
Що за Flexbox ?!