Все, що потрібно знати про вирівнювання по Flexbox

Про автора: Рейчел Ендрю — не тільки головний редактор журналу Smashing Magazine, але і веб-розробник, письменник і спікер. Вона автор ряду книг, у тому числі The New CSS Layout, один з розробників системи управління контентом Perch. Пише про бізнесі й технологіях на своєму сайті rachelandrew.co.uk.

Короткий зміст: у цій статті ми розглянемо властивості вирівнювання по Flexbox і деякі основні правила, як працює вирівнювання по основний і поперечній осях.

У першій статті цього циклу я розповіла, що відбувається при оголошенні властивості display: flex для елемента. Зараз розглянемо властивості вирівнювання і як вони працюють з Flexbox. Якщо ви коли-небудь приходили в замішання, застосувати align або justify, сподіваюся, ця стаття багато чого прояснить!

Історія вирівнювання по Flexbox

За всю історію CSS правильне вирівнювання по обох осях здавалося найскладнішою проблемою. Поява цієї функції під Flexbox для багатьох стало головною перевагою цієї технології. Вирівнювання звелося до двох рядками CSS.

Властивості вирівнювання тепер повністю визначені в специфікації Box Alignment. Вона деталізує, як працює вирівнювання в різних макетів. Це означає, що в CSS Grid можна використовувати ті ж властивості, що і в Flexbox — а в майбутньому в інших макетах теж. Тому будь-яка нова функція вирівнювання Flexbox буде докладно описана в специфікації Box Alignment, а не в наступної версії Flexbox.

Властивості

Багатьом важко запам’ятати, слід використовувати властивості, які починаються з align- або з justify-. Важливо пам’ятати наступне:

  • justify- виконує вирівнювання по головній осі в тому ж напрямку, що і flex-direction;
  • align- виконує вирівнювання по осі поперек напрямку flex-direction.

Тут дійсно допомагає мислення з точки зору головної і поперечної осей, а не горизонтальній і вертикальній. Не має значення, як фізично спрямована вісь.

Вирівнювання головної осі з допомогою justify-content

Почнемо з вирівнювання по головній осі. Воно здійснюється з допомогою властивості justify-content. Дана властивість обробляє всі елементи як групу і управляє розподілом простору між ними.

Початкове значення justify-content дорівнює flex-start. Ось чому при оголошенні display: flex всі елементи flex шикуються на початку рядка. В писемності зліва направо елементи групуються ліворуч.


Зверніть увагу, що властивість justify-content виробляє видимий ефект тільки при наявності вільного місця. Тому якщо у вас набір елементів, що займає весь простір на головній осі, justify-content нічого не дасть.


Якщо вказати для justify-content значення flex-end, то всі елементи перемістяться в кінець рядка. Вільне місце тепер знаходиться в початку.


Із цим простором можна робити і інші речі. Наприклад, розподілити його між нашими елементами, використовуючи justify-content: space between. У цьому випадку перший і останній елемент розмістяться на кінцях контейнера, а весь простір порівну ділиться між елементами.

Читайте також  Ілюзія простору: як новий Spiderman рендерить приміщення без геометрії


Ми можемо розподілити простір з допомогою justify-content: space-around. У цьому випадку доступне простір ділиться на рівні частини і поміщається з кожного боку елемента.


Нове значення justify-content можна знайти в специфікації Box Alignment; воно не зазначено у специфікації Flexbox. Це значення space-evenly. У цьому випадку елементи рівномірно розподіляються в контейнері, а додатковий простір порівну розподіляється між елементами і з обох сторін.

Ви можете погратися з усіма значеннями в демо.

Значення точно так само працюють по вертикалі, тобто якщо flex-direction застосовується для column. Правда, у вас в стовпці може не виявитися вільного місця для розподілу, якщо не додати висоту або block-size контейнера, як в цьому демо.

Вирівнювання по осях за допомогою align-content

Якщо в контейнері кілька осей і зазначено flex-wrap: wrap, то можна використовувати align-content для вирівнювання рядків на поперечної осі. Але потрібно додатковий простір. У цій демонстрації поперечна вісь працює в напрямку колонки, і я вказала висоту контейнера 60vh. Оскільки це більше, ніж необхідно для відображення всіх елементів, то з’являється вільний простір по вертикалі.

Потім я можу застосувати align-content з будь-яким із значень.

Якщо в якості flex-direction зазначено column, то align-content працює як в наступному прикладі.

Як і у випадку з justify-content, ми працюємо з групою рядків і розподіляємо вільний простір.

Властивість за place-content

У специфікації Box Alignment можна знайти властивість place-content. Використання цієї властивості означає, що ви одночасно визначаєте justify-content та align-content. Перше значення — для align-content, друге для justify-content. Якщо задано тільки одне значення, то воно застосовується до обох властивостями:

.container {
 place-content: space between stretch;
}

Відповідає цьому:

.container {
 align-content: space between; 
 justify-content: stretch;
}

А такий код:

.container {
 place-content: space between;
}

Рівноцінний наступному:

.container {
 align-content: space between; 
 justify-content: space between;
}

Вирівнювання по осях за допомогою align-items

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


Як варіант, можна визначити властивість height у контейнері:


Чому елементи розтягуються до розміру самого високого елемента — це тому що початковим значенням параметра align-items є stretch. Елементи розтягуються по поперечної осі до розміру контейнера в цьому напрямку.

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

Читайте також  Як розробити дизайн і код персонального веб-сайту

Крім початкового значення stretch, можна привласнити елементам align-items значення flex-start, в цьому випадку вони вирівнюються по початку контейнера і більше не розтягуються по висоті.


Значення flex-end - переміщує їх в кінець контейнера по поперечної осі.


Якщо ви використовуєте значення center, елементи зосереджені відносно один одного:


Ми також можемо вирівняти їх по базовій лінії. Це гарантує вирівнювання тексту по одному основи, на відміну від вирівнювання поля навколо тексту.


Всі ці варіанти можна спробувати демо.

Індивідуальне вирівнювання з допомогою align-self

Властивість align-items задає вирівнювання всіх елементів одночасно. В дійсності воно встановлює значення align-self для всіх елементів групи. Можна також використовувати властивість align-self для будь-якого окремого елемента, щоб вирівняти його всередині рядка і щодо інших елементів.

У наступному прикладі в контейнері використовується align-items для вирівнювання всієї групи по центру, але також align-self для першого і останнього елементів.

Чому немає justify-self?

Часто виникає питання, чому неможливо вирівняти один елемент або групу елементів по головній осі. Чому під Flexbox немає властивості -self для вирівнювання по головній осі? Якщо ви представите justify-content та align-content як спосіб розподілу простору, то відповідь стає більш очевидною. Ми маємо справу з елементами як з групою і розміщуємо вільний простір певним чином: або на початку, або в кінці групи, або між елементами.

Також може бути корисно подумати, як justify-content та align-content працюють в CSS Grid Layout. В Grid ці властивості використовуються для розподілу вільного простору в grid-контейнері між grid-доріжками. Тут теж ми беремо групу доріжок — і з допомогою цих властивостей розподіляємо між ними вільний простір. Оскільки ми оперуємо в групі і в Grid, і під Flexbox, то не можемо взяти окремий елемент і зробити з ним щось інше. Тим не менш, є спосіб отримати оформлення макета, який хочуть верстальники, коли говорять про властивості self на головній осі. Це використання автоматичних полів.

Використання автоматичних полів на основній осі

Якщо ви коли-небудь вели блок в CSS (наприклад, врапперов для контенту головної сторінки, встановивши поля зліва і справа в auto), то у вас вже є певний досвід роботи з автоматичними полями. Значення auto для полів заповнює максимальний простір в установленому напрямку. Для центрування блоку ми встановлюємо і ліве, і праве поле в auto: кожне з них намагається зайняти якомога більше місця, і тому поміщає наш блок у центр.

Автоматичні поля дуже добре працюють у Flexbox для вирівнювання окремих елементів або груп елементів на головній осі. В наступному прикладі показано типовий випадок. Є панель навігації, елементи відображаються у вигляді рядка і використовують початкове значення justify-content: start. Я хочу, щоб останній пункт відображався окремо від інших у кінці рядка — за умови, що в рядку достатньо місця для цього.

Читайте також  Чому герої відеоігор майже ніколи не роздягаються

Беремо цей елемент і вказуємо для властивості margin-left значення auto. Це означає, що поле намагається отримати якомога більше місця ліворуч від елемента, тобто елемента виштовхується до правої межі.

Якщо ви використовуєте автоматичні поля на головній осі, то justify-content перестане діяти, так як автоматичні поля займуть весь простір, який в іншому випадку розподіляється за допомогою justify-content.

Запасне вирівнювання

Для кожного методу вирівнювання описаний запасний варіант — що станеться, якщо задане вирівнювання неможливо. Наприклад, якщо у вас є тільки один елемент в контейнері, а ви вказали justify-content: space between, що має статися? У цьому випадку застосовується запасне вирівнювання flex-start — один елемент буде вирівняно по початку контейнера. У разі justify-content: space-around використовується запасне вирівнювання center.

У поточній специфікації ви не можете змінити запасне вирівнювання. Є примітка до специфікацій, яке допускає можливість зазначення запасного варіанту в майбутніх версіях.

Безпечне і небезпечне вирівнювання

Недавнім доповненням до специфікації Box Alignment стала концепція безпечного і небезпечного вирівнювання з використанням ключових слів safe і unsafe.

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

.container { 
 display: flex;
 flex-direction: column;
 width: 100px;
 align-items: unsafe center;
}

.item:last-child {
 width: 200px;
}


Безпечне вирівнювання запобігає втраті даних, переміщаючи переповнення на іншу сторону.

.container { 
 display: flex;
 flex-direction: column;
 width: 100px;
 align-items: safe center;
}

.item:last-child {
 width: 200px;
}


Ці ключові слова поки підтримуються не всіма браузерами, однак демонструють, як специфікації Box Alignment додають контролю під Flexbox.

Висновок

Властивості вирівнювання починалися зі списку Flexbox, але тепер мають власну специфікацією і застосовуються до інших контекстів макетування. Ось кілька ключових фактів, які допоможуть запам’ятати їх використання під Flexbox:

  • justify- для основних осей, а align- для поперечних;
  • для align-content і justify-content потрібно вільний простір;
  • властивості align-content і justify-content застосовуються до елементів в групі, розподіляючи простір між ними. Не можна вказувати вирівнювання окремого елемента, тому що властивість -self відсутня;
  • якщо хочете вирівняти один елемент або розбити групу з основної осі, використовуйте автоматичні поля;
  • align-items встановлює однакові властивості align-self для всієї групи. Використовуйте align-self для дочірнього елемента групи, щоб встановити йому значення індивідуально.

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *