Flexbox в CSS & HTML: Інструкції щодо вирівнювання по головній вісі

У цьому посібнику ти дізнаєшся, як вирівнювати елементи в Контейнері Flexbox вздовж головної вісі. Ми вже розглядали вирівнювання вздовж поперечної вісі, але головна вісь так само важлива. Технологія Flexbox надає тобі різні можливості для гнучкого та адаптивного вирівнювання твоїх елементів. Давай покраще розглянемо це!

Головні знання

• Вирівнювання по головній вісі відбувається за допомогою властивості justify-content.
• Ти можеш використовувати різні значення, такі як center, flex-start, flex-end, space-between та space-around, щоб налаштувати свій макет.
• Налаштування Flexbox безпосередньо впливають на розміщення елементів у бажаному напрямку.

Крок за кроком посібник

1. Ініціалізувати Flex-Контейнер

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

2. Стандартне вирівнювання елементів

Якщо ти розмістив свої елементи у контейнері без спеціальних налаштувань стилів, то побачиш, що вони за замовчуванням вирівнюються у початковій частині контейнера. Ти можеш надати їм ширину 100 пікселів, щоб продемонструвати це.

3. Центрування

Для центрування елементів використовуй CSS-властивість justify-content зі значенням center. Це призведе до центрування елементів у середині контейнера, що створює дуже привабливе розміщення.

4. Вирівнювання елементів в кінці

У випадку, якщо ти хочеш розмістити елементи в кінці контейнера, ти можеш використати значення flex-end для justify-content. Це розміщує елементи в правій кінцевій частині контейнера.

5. Вирівнювання елементів на початку

Поведінка за замовчуванням без налаштувань - це flex-start, що означає, що елементи залишаються на початку контейнера. Це налаштування корисне, коли ти хочеш чітке, охайне розташування елементів у верхній частині контейнера.

6. Зміна напрямку Flex

При зміні напрямку Flex на column, головна вісь змінюється з горизонтальної на вертикальну. Таким чином елементи тепер відображаються зверху донизу.

7. Центрування елементів у вертикальному вирівнюванні

Ти також можеш центрувати елементи у цьому новому вирівнюванні, використовуючи justify-content: center. Це налаштування забезпечує відображення всіх елементів в середині контейнера.

8. Вирівнювання в нижній частині

Якщо ти хочеш, щоб елементи були у нижній частині контейнера, знову налаштуй flex-end. Це розташовує елементи в нижній частині контейнера.

9. Використання властивостей розмірків

Flexbox також дозволяє тобі контролювати простір між елементами за допомогою space-between, space-around та space-evenly. Ці властивості розподіляють доступний простір різними способами.

10. Використання Space-Between

З застосуванням justify-content: space-between перше елемент залишається у верхній частині, а останній елемент - у нижній частині контейнера, причому простір між елементами рівномірно розподілено.

11. Спробуйте простір-навколо

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

12. Використовуйте Однаковий простір

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

Підсумок

У цьому посібнику ви навчилися, як налаштувати вирівнювання в головній вісі за допомогою Flexbox. Користуючись властивістю justify-content, ви можете дуже гнучко позиціонувати свої елементи. Ви також дізналися про різні властивості, які допомагають досягти потрібного макету. Використовуйте ці знання для створення привабливих та користувацьких дизайнів!