Flexbox обіцяє врятувати нас від зла простого CSS (такого як вертикальне вирівнювання).
Ну, Flexbox дійсно досягає цієї мети. Але освоєння цієї нової ментальної моделі може виявитися непростим завданням.
Тому давайте за допомогою анімації розглянемо те як працює Flexbox, щоб ми могли використовувати його при розробці кращих макетів.
Основний принцип Flexbox полягає в тому, щоб робити макети гнучкими і інтуїтивно зрозумілими.
Для досягнення цієї мети, він дозволяє контейнерів самим вирішувати як рівномірно розподіляти дочірні елементи, включаючи їх розмір і відстань між ними.
В принципі, все це добре звучить. Але давайте подивимося як це виглядає на практиці.
У цій статті ми заглибимося в 5 найпоширеніших властивостей Flexbox. Ми вивчимо те що вони роблять, як ми можемо їх використовувати, і як вони будуть виглядати в результаті.
Властивість # 1: display: flex
Ось наш приклад веб-сторінки:
У вас є чотири кольорових блоку різних розмірів, що знаходяться в сірому контейнері. На даний момент, у кожного блоку за замовчуванням встановлено властивість display. block. Таким чином, кожен прямокутник займає всю ширину лінії на якій він знаходиться.
Для того щоб почати працювати з Flexbox, вам потрібно перетворити ваш контейнер у flex-контейнер. Це також легко як:
Чи не багато чого змінилося - тепер ваші блоки відображаються в одну лінію, ось і все. Але за лаштунками, ви зробили щось потужне. Ви дали вашим прямокутникам те, що називається flex-контекстом.
Тепер ви можете почати позиціонувати їх в цьому контексті, з набагато меншими труднощами ніж в традиційному CSS.
Властивість # 2: Flex Direction
У Flexbox контейнера є дві осі: головна вісь і перетинає вісь. які за умовчанням виглядають наступним чином:
За замовчуванням елементи розташовуються уздовж основної осі, зліва направо. Ось чому ваші прямокутники за замовчуванням вишикувалися по горизонтальній лінії після того як ви застосували властивість display. flex.
Однак flex-direction. дозволяє вам обертати основну вісь.
У вашому розпорядженні є п'ять команд для використання їх в justify-content:
Space-around і space-between найменш інтуїтивні. Space-between робить рівну відстань між прямокутниками, але не між прямокутниками і контейнером.
Space-around робить однакову відстань з кожного боку прямокутника - що власне означає, що простір між крайніми прямокутниками і контейнером вдвічі менше, ніж між двома прямокутниками (кожен з прямокутників привносить рівний, що не перетинається відступ, що власне подвоює відстань).
Заключне зауваження: запам'ятайте, що justify-content працює уздовж основної осі а flex-direction перемикає основну вісь. Це дуже важливо для переходу на ...
Властивість # 4: Align Items
Якщо ви освоїли justify-content. то align-items здасться вам легким вітерцем.
Як justify-content працює уздовж основної осі, так align-items застосовується до перетинає осі.
Давайте скинемо наш flex-direction на row. щоб наші осі виглядали як на малюнку вище.
А тепер, заглибимося в команди align-items.
Перші три працюють точно також як і в justify-content. тому тут немає нічого особливого.
Однак, такі два трохи відрізняються.
Є stretch. при якому елементи займають всю повноту перетинає осі і baseline. при якому вони вирівнюються в нижній частині тегів параграфа.
(Зверніть увагу що для align-items: stretch я повинен був встановити значення висоти прямокутників на auto. В іншому випадку властивість height буде перевизначати stretch.)
Для baseline слід пам'ятати, що якщо ви забираєте теги параграфа, він вирівняє нижню частину прямокутників, наприклад так:
Для того щоб краще продемонструвати основну і перетинає осі, давайте сумісний властивості justify-content і align-items. і подивимося як працює різне центрування для двох flex-direction команд:
З row прямокутники вишиковуються уздовж горизонтальної центральної осі. З column вони опускаються уздовж вертикальної центральної осі.
Навіть якщо прямокутники розташовані по центру в обох випадках (як по вертикалі, так і по горизонталі), вони не є взаємозамінними!
Властивість # 5: Align Self
Align-self дозволяє вам вручну управляти вирівнюванням одного конкретного елемента.
В основному, він перевизначає властивість align-items для одного прямокутника. Всі можливі значення точно такі ж як align-items. хоча за замовчуванням варто auto. який успадковується від властивості align-items контейнера.
Давайте подивимося на те як це виглядає. Застосуємо align-self двом прямокутникам, а для інших поставимо align-items. center і flex-direction. row.
висновок
Незважаючи на те, що ми тільки подряпали поверхню Flexbox, цих команд має бути достатньо для обробки більшості основних вирівнювань і вертикального розташування елементів до серця вашого вмісту.
Дякую за те що прочитали!
Дякуємо. Відмінно все представлено!
Спасибі, здорово! Ясно і зрозуміло))
Давно хотів розібратися з flexbox. Дякуємо!
Дуже доступно, хотілося-б більше анімованих статей по flexbox, для більш глибокого пізнання.
Дякую за наочності і приклади
Хоч уже й не перший раз працював з flex'амі, тільки що дізнався про основну і перетинає осі
Корисні речі в приємному форматі