Поради та підказки щодо CSS Flexbox

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;:

Ігровий майданчик CSS не має гнучких властивостей

Після додавання display: flex;ми отримуємо нижче - ви бачите, що застосовуються властивості Flex за замовчуванням, змушуючи це виглядати так:

CSS ігровий майданчик відображає гнучкий стиль за замовчуванням

Напрямок гнучкості

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

Flexbox застосовує рядки як типові для напрямку. Ось як вони всі виглядають:

flex-direction: row;

flex-direction: рядок;  приклад

flex-direction: row-reverse;

flex-direction: приклад зворотного рядка

flex-direction: column;

flex-direction: приклад стовпця

flex-direction: column-reverse;

flex-direction: приклад зворотного стовпця

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 ?!