Flexbox - The Ultimate CSS Flex Cheatsheet (з анімованими схемами!)

Ця вичерпна таблиця CSS flexbox охоплює все, що вам потрібно знати, щоб почати використовувати flexbox у своїх веб-проектах.

Розкладка CSS flexbox дозволяє легко форматувати HTML. Flexbox спрощує вирівнювання елементів по вертикалі та горизонталі за допомогою рядків і стовпців. Предмети будуть «згинатися» до різних розмірів, щоб заповнити простір. Це полегшує чуйний дизайн.

CSS flexbox чудово підходить для загального розміщення вашого веб-сайту або програми. Це легко навчитися, підтримується у всіх сучасних браузерах, і не потрібно так довго, щоб з’ясувати основи. Наприкінці цього посібника ви будете готові почати використовувати flexbox у своїх веб-проектах.

Стаття містить корисні анімовані GIF-файли від Скотта Домеса, які ще більше полегшать розуміння та візуалізацію flexbox.

Усі властивості CSS Flexbox

Ось список усіх властивостей флексбоксу CSS, які можна використовувати для позиціонування елементів у 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;

Термінологія

Перш ніж дізнатися, що роблять властивості flexbox, важливо зрозуміти відповідну термінологію. Ось визначення ключових термінів flexbox, взяті з офіційної специфікації W3C для flexbox.

  • головна вісь : Головна вісь гнучкого контейнера - це основна вісь, уздовж якої викладаються гнучкі елементи. Напрямок базується на властивості flex-direction.
  • головний старт | головний кінець :Елементи гнучкості розміщуються в контейнері, починаючи з боку головного початку і йдучи до сторони головного кінця.
  • основний розмір : ширина або висота гнучкого контейнера або гнучкого предмета, залежно від того, який із основних розмірів, є основним розміром цього ящика. Таким чином, його основна властивість розміру - це властивість ширини або висоти, залежно від того, що знаходиться в основному вимірі.
  • поперечна вісь : вісь, перпендикулярна до головної осі, називається поперечною віссю. Його напрямок залежить від напрямку головної осі.
  • перехресний старт | поперечний кінець : гнучкі лінії заповнюються предметами і поміщаються в контейнер, починаючи з боку поперечного старту гнучкого контейнера і йдучи до поперечного боку.
  • хрестовий розмір : ширина або висота гнучкого предмета, залежно від того, який розмір перехресного розміру, є розміром хреста предмета. Властивість перехресного розміру - це будь-яка з "ширини" або "висоти", яка знаходиться в перехресному вимірі.

CSS Display Flex

display: flex is каже вашому браузеру: "Я хочу використовувати flexbox із цим контейнером, будь ласка."

А divелемент по замовчуванням display:block. Елемент із цим параметром відображення займає всю ширину рядка, на якому він знаходиться. Ось приклад чотирьох кольорових div у батьківському div із налаштуваннями відображення за замовчуванням:

Щоб використовувати flexbox у розділі вашої сторінки, спочатку перетворіть батьківський контейнер у flex-контейнер, додавши display: flex;до CSS батьківського контейнера.

Це ініціалізує цей контейнер як гнучкий контейнер і застосує деякі властивості гнучкості за замовчуванням.

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

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

Розташування за замовчуванням після подання заявок display: flexстосується елементів, розташованих уздовж головної осі зліва направо. Анімація нижче показує, що відбувається при flex-direction: columnдодаванні до елемента-контейнера.

Ви також можете встановити flex-directionв row-reverseі column-reverse.

Обґрунтуйте зміст

justify-contentє властивістю вирівнювати елементи в контейнері вздовж головної осі (див. схему термінології вище). Це змінюється залежно від способу відображення вмісту. Це дозволяє нам заповнити будь-який порожній простір у рядках і визначити, як ми хочемо його "виправдати".

Ось наші найбільш поширені варіанти , які використовуються для обґрунтування змісту: flex-start | flex-end | center | space-between | space-around.

Ось як виглядають різні варіанти:

space-betweenрозподіляє елементи так, щоб перший елемент був на одному рівні з початком, а останній - на одному рівні з кінцем. space-aroundсхожий, але елементи мають простір у половину розміру з обох кінців.

Вирівнювання елементів Flex

align-itemsдозволяє нам вирівняти елементи вздовж поперечної осі (див. схему термінології вище). Це дозволяє розміщувати вміст різними способами, використовуючи вирівнювання вмісту та вирівнювання елементів разом.

Ось найпоширеніші варіанти вирівнювання елементів: flex-start | flex-end | center | baseline | stretch

Щоб stretchпрацювати так, як ви очікували, висоту елементів потрібно встановити autoзамість певної висоти.

Ця анімація показує, як виглядають параметри:

Тепер ми будемо використовувати обидва justify-contentта align-items. Це покаже різницю між головними осями та поперечними осями.

Вирівняти Self

align-self дозволяє регулювати вирівнювання окремого елемента.

Він має однакові властивості align-items.

У наступній анімації батьківський div має CSS align-items: centerі flex-direction: row. Перші два квадрати переходять через різні align-selfзначення.

Flex Wrap

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

Значення за замовчуванням - flex-wrap: nowrap. Це призведе до того, що все залишиться в одному ряду зліва направо.

flex-wrap: wrap  дозволить елементам перейти до наступного рядка, якщо в першому рядку недостатньо місця. Елементи відображатимуться зліва направо.

flex-wrap: wrap-reverse також дозволяє елементам переходити до наступного рядка, але цього разу елементи відображаються справа наліво.

Flex Flow

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertically Centering with Flexbox

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

.parent { display: flex; align-items: center; }

Games and Apps

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
  • Flexbox Patters is a website that shows off a bunch of Flexbox examples.

Conclusion

We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.