Неймовірна потужність Flexbox

Sep 17, 2025

Як

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

Основи FlexBox

У своїй основній формі Flexbox складається з двох елементів: контейнер Flex (або Flex Parent) та Flex (Flex Children). Контейнер згинання є містить елемент (наприклад, ділити ) Враховуючи майно відображення гнучкий . Елементи Flex - це дитячі елементи контейнера Flex, які можуть маніпулювати за допомогою різних показників.

Flex Containers and Flex Кожна з них мають свій власний діапазон властивостей, які можуть бути об'єднані різними способами для створення ряду складних макетів. Елементи всередині контейнера Flex можуть бути викладені горизонтально або вертикально, вирівняні та розподілені різними способами, і розтягнуті або скоротилися, щоб відповідати доступному простору. Всі ці варіанти дозволяють легко створювати чутливі макети.

Як використовувати Flexbox

Щоб почати використовувати FLEXBOX, потрібно спочатку створити свій контейнер Flex (батьківський елемент, який буде містити ваші елементи Flex). У цьому прикладі ми будемо використовувати a ділити блок. Перш ніж ми стиль елемент, давайте додати ще три ділити Блоки всередині нашого контейнера Flex виступають як елементи Flex. На цьому етапі предмети будуть складені.

Завдяки нашим дітям, ми можемо встановити майно материнського контейнера гнучкий .

 Flex Container {
Дисплей: Flex;
}

Напрямки макета

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

 Flex Container {
Дисплей: Flex;
Flex-Direction: Row;
}

Flex Container {
Дисплей: Flex;
Напрямок Flex: колонка;
}

Який би напрямок, який ви встановили на вашому контейнері Flex, називається його "основним" напрямком, тоді як інший напрямок, який ви не вибрали, стає напрямком "крос". Таким чином, за замовчуванням основний напрямок буде горизонтальним, а поперечний напрямок буде вертикальним.

Flexbox також дозволяє змінити макет. При зворотному напрямку, діти контейнера з гнучкою буде викладено праворуч (якщо напрямок є рядок ) або знизу до вершини (якщо напрямок є колонка ).

 Flex Container {
Дисплей: Flex;
Flex-Direction: Row-Reverse;
}

Flex Container {
Дисплей: Flex;
Flex-Direction: колонка-зворотний;
}

Це може прийти в зручний, якщо ви хочете змінити макет на менших екранах.

Наприклад, повідомте на настільних екранах, які ви хочете відобразити текст на лівій частині екрана та зображення праворуч (див. Дошка. На мобільному телефоні це перемістить зображення нижче тексту. Зворотуючи напрямок, ви можете забезпечити, щоб зображення з'явилося вище тексту.

Налаштуйте вирівнювання

Налаштування Flexbox також дають вам два різні методи вирівнювання вмісту: вертикально та горизонтально. Ось ваші горизонтальні варіанти вирівнювання для елементів всередині контейнера Flex:

згинальний : Елементи, встановлені до початку рядка (ліворуч, якщо ви не скасували макет)

центр : Предмети, центровані в рядку

гнучкий кінець : Елементи, встановлені до кінця рядка (праворуч, якщо ви не скасували макет)

пробіл : Елементи, рівномірно розподілені вздовж рядка

простір : Елементи, рівномірно розподілені вздовж ряду, з рівним простором з обох боків кожного елемента

Таким чином, код може виглядати так:

 Flex Container {
Дисплей: Flex;
Flex-Direction: Row;
Вирівнювання-вміст: Flex-Start | Flex-End | центр | пробіл між | простір-навколо | розтягування;
}

Ось ваші вертикальні варіанти вирівнювання для елементів у контейнері Flex:

згинальний : Елементи вирівняні до верхньої частини рядка

центр : Елементи центруються в рядку

гнучкий кінець : Елементи, вирівняні до нижньої частини рядка

розтягувати : Елементи розтягнуті по висоті ряду

базовий : Предмети, вирівняні до своїх базових ліній (уявна лінія, що сидить текст)

Код може виглядати так:

 Flex Container {
Дисплей: Flex;
Flex-Direction: Row;
Вирівнювання елементів: Flex-Start | Flex-End | центр | Базова лінія | розтягування;
}

За замовчуванням діти контейнера Flex завжди будуть намагатися відповідати на одному рядку. Якщо ви хочете змінити це, ви можете додати упаковка атрибут. Це дозволяє дітям обернути нову лінію, якщо вони закінчуються простір.

 Flex Container {
Дисплей: Flex;
Flex-Wrap: Wrap;
}

Елементи Flex також отримують власні властивості на основі Flex. Коли елемент поміщається всередині контейнера Flex, він автоматично стає гнучкою дитиною, і надається власний набір стилів CSS на основі Flex. Ці стилі керування розміром, вирівнювання та порядку відображення.

Розміщення Flex

Дитячі Flex можуть змінювати свою ширину або висоту (залежно від напрямку макета контейнера), щоб заповнити доступний простір.

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

 FLEX елемент {
Flex-Shrink: & lt; номер & gt ;;
Flex-Grow: & lt; номер & gt ;;
Flex-Base: & lt; довжина & gt; | авто;
}

Давайте подивимося на те, що кожен з цих варіантів робить:

Зменшення при необхідності: Розміри елемент на основі його ширини / висоти або його вмісту. Елемент не буде збільшуватися, ніж це потрібно, але може зменшуватися до свого мінімального розміру, щоб запобігти переповненню
Заповніть порожній простір: Дозволяє елемент розширюватися, щоб заповнити всі доступні місця всередині свого батька. Якщо ви встановите це на всіх елементах у контейнері Flex, вони розширюють, щоб зайняти рівну кількість порожнього простору
Не стикайтеся: Розміри елемент на основі його ширини / висоти або його вмісту, але не дозволяє його скоротити, навіть якщо це призведе до переповнення

Елементи Flex також можуть мати власні налаштування вирівнювання, які перевизначають вирівнювання за замовчуванням, встановленим своїм контейнером Flex Flex. Ці вирівнювання поводяться, як це пояснюється раніше.

 FLEX елемент {
Дисплей: Flex;
Flex-Direction: Row;
Вирівнювання елементів: Flex-Start | Flex-End | центр | Базова лінія | розтягування;
}

За замовчуванням з'являються елементи Flex у тому ж порядку, як вони з'являються у вихідному коді. За допомогою FlexBox ви можете перевизначити цю поведінку, щоб забезпечити демонструйте елементи точно потрібного замовлення.

Є чотири основні варіанти, які ви можете використовувати тут:

Автоматичний : Значення за замовчуванням, який наказує, як вони знаходяться у джерелі
Спочатку : Пункт з'являється спочатку у його контейнері Flex
Остання : Пункт з'являється останнім у своєму контейнері Flex
Звичайний : Ви можете налаштувати замовлення, який буде відображатися

Користувацьке замовлення можна визначити як номер, який визначає порядок, в якому елемент Flex з'являється всередині контейнера Flex.

 FLEX елемент {
Замовлення: & lt; ціле число & gt ;;
}

Чому я його використовувати?

Я радий, що ти запитав! Використання Flexbox дозволяє легко створювати чутливі макети, які колись були дуже складними (або неможливими), щоб створити з старшими модулями макета CSS.

Погляньте на приклади на зображенні нижче - багато з яких ви, напевно, вже бачили в Інтернеті. Майже всі вони займуть значну кількість CSS (особливо на різних розмірах екрана), але потрібно лише кілька простих рядків для досягнення з Flexbox. Щоб побачити ці приклади в дії, відвідування flexbox.webflow.com .

Неймовірна потужність Flexbox

Основи FlexBox

Як використовувати Flexbox

Напрямки макета

Налаштуйте вирівнювання

Розміщення Flex

Чому я його використовувати?

Як - Найпопулярніші статті

Як створити цифрові повітряні пневматичні картини

Стиль сайту за допомогою SASS

Як використовувати текстури в Photoshop

Як рухатися між студією DAZ та Zbrush

Як почати роботу з маслом

Створіть ефект розливу води в Realflow

Створіть користувацький інтерфейс Maya

Створіть ефект сплеску в RealFlow

Категорії