Властивості контейнера
Last updated
Last updated
Flex Container - це елемент, який має властивість display: flex; або display: inline-flex;. Він є батьком для елементів розташованих всередині нього. Всередині контейнера будуть застосовані правила Flexbox. І розташовуватимуться елементи відносно осей контейнера.
Властивість display надає елементу властивості блокового або рядково-блокового flex-контейнера. Також після цього всі його діти (але не нащадки) стають flex-елементами.
Блокові елементи у звичайному потоці документа ідуть один під одним. У flex-контейнері ми можемо спозиціонувати наші елементи як забажаємо. Наприклад розмістити їх в рядок (напрямок за замовчанням у flex-контейнера).
Елементи уже можна стилізувати на свій смак.
При цьому розміщені інші елементи всередині flex-елементів не будуть наслідувати правила flex-контейнера. Але можна створити з flex-елемента flex-контейнер і його діти стануть для нього flex-елементами. Але про це трохи пізніше.
Властивість flex-direction встановлює напрямок, в якому будуть розташовані дочірні flex-елементи. Ця властивість дозволяє розташовувати елементи в горизонтальному ряду, вертикальному стовпці або навспак.
row (за замовчуванням): flex-елементи розташовуються в ряд (горизонтально).
row-reverse: flex-елементи розташовуються в ряд, але у зворотному порядку (горизонтально).
column: flex-елементи розташовуються в колонку (вертикально).
column-reverse: flex-елементи розташовуються в колонку, але у зворотному порядку (вертикально).
Ця властивість дозволяє легко змінювати напрямок розташування елементів у Flexbox контейнері відносно головної осі (main axis). Тобто ця властивість міняє місцями main-start і main-end головної осі. А flex-елементи завжди будуть розміщені вздовж головної осі від початку (main-start) до кінця (main-end).
Властивість justify-content використовується для вирівнювання дочірніх flex-елементів вздовж головної осі (main axis). Ця властивість дозволяє розподіляти доступний простір між або навколо гнучких дочірніх елементів в контейнері в горизонтальному або вертикальному напрямку.
flex-start: flex-елементи розташовуються від початку контейнера (горизонтально зліва або вертикально зверху).
flex-end: flex-елементи розташовуються від кінця контейнера (горизонтально справа або вертикально знизу).
center: flex-елементи вирівнюються в центрі контейнера (горизонтально або вертикально).
space-between: flex-елементи розташовуються з однаковими відстанями між ними, але без відступів на краях контейнера.
space-around: flex-елементи розташовуються з однаковими відстанями навколо них.
space-evenly: flex-елементи розташовуються з однаковими відстанями між ними та на краях контейнера.
Властивість align-items використовується для вирівнювання дочірніх flex-елементів вздовж поперечної осі (cross axis). Ця властивість дозволяє розміщувати елементи вертикально вздовж головної осі (main axis) та горизонтально вздовж поперечної осі.
stretch: flex-елементи розтягуються, щоб заповнити висоту контейнера (для горизонтальних контейнерів) або ширину контейнера (для вертикальних контейнерів).
flex-start: flex-елементи розташовуються вгорі контейнера (поперечна ось для горизонтального контейнера або ліворуч для вертикального контейнера).
flex-end: flex-елементи розташовуються внизу контейнера (поперечна ось для горизонтального контейнера або праворуч для вертикального контейнера).
center: flex-елементи вирівнюються по центру поперек контейнера.
baseline: flex-елементи вирівнюються за їх базовою лінією (основою тексту).
Найкраще результат цієї властивості видно на елементах різної висоти.
Застосуємо на практиці наші знання. Припустимо нам потрібно зробити стандартне верхнє меню сайту. У нього буде зліва логотип компанії, а справа розташовуватися меню навігації.
У цьому випадку найкраще верстати секцію header за допомогою Flex.
header зробимо flex-контейнером і розташуємо дочірні елементи так, щоб між ними був простір властивість justify-content встановимо в space-between.
щоб у header логотип і праве меню були відцентровані по вертикалі, align-items установимо в значення center
своєю чергою праве меню з посилань також зробимо flex-контейнером, щоб посилання розмістити у рядок.
Плюс додаємо свою стилізацію згідно з макетом. Тепер у нас гарне верхнє меню з автоматичним розташуванням навігації справа.
Припустімо у нас є картка, яка є flex-контейнером і всередині горизонтально розташовані картинка та опис. В такому випадку виникне проблема. Адже за замовчанням значення align-items має значення stretch. Відтак зображення просто розтягнеться по висоті всієї картки тобто по висоті найвищого елемента.
Щоб виправити цю проблему достатньо змінити властивість align-items.
Властивість flex-wrap визначає, чи повинні дочірні flex-елементи вирівнюватися в одному ряду чи колонці або чи можуть вони переходити на новий ряд або колонку, якщо вони не вміщуються в контейнері.
nowrap (за замовчуванням): дочірні flex-елементи розміщуються в одному ряду або колонці. Якщо вони не вміщуються у контейнері, вони будуть зменшені в розмірі, або може бути використано властивості flex-shrink для зменшення їхнього розміру.
wrap: дочірні flex-елементи розміщуються в різних рядах або колонках, якщо вони не вміщуються в контейнері.
wrap-reverse: дочірні flex-елементи розміщуються в різних рядах або колонках, але у зворотному порядку від кінця до початку контейнера.
Властивість gap визначає відстань між дітьми flex-контейнера. Властивість gap дозволяє вказати простір між елементами у flex-контейнері, без потреби вказувати відстань за допомогою властивостей margin.
Окремо можна встановити властивості row-gap та column-gap, які дозволяють визначити розміри відступів між рядками та стовпцями сітки.
Властивість gap використовують, коли відступи однакові, інакше використовують row-gap та column-gap.
За допомогою Flexbox можна реалізувати сітку елементів. Це можуть бути картки товарів, кінофільмів, статей в блозі тощо.
Для того, щоб картки автоматично розташовувались у сітці потрібно батьківський блок зробити flex-контейнером із перенесенням елементів при переповненні. Також потрібно встановити відстань між сусідніми елементами.
Для рівномірного розташування дітей потрібно задати їм розміри ширини. Зрозуміліше це розглянути на прикладі.
Наприклад ми хочемо розмістити картки у три стовпчики із проміжком між ними 10px. Ширина однієї картки фіксована 200px.
Проведемо деякі розрахунки. Проміжків між картками завжди буде на один менше ніж карток в рядку. Тобто якщо стовпчики три, то закладаємо на відступи 2*10px = 20px. Картки у нас три, тобто 3*200px = 600px. Ширина батьківського контейнера має бути 600px+20px = 620px.
При цьому, щоб все правильно спрацювало потрібно не забути задати box-sizing: border-box; а також у дочірніх елементів скасувати всі зовнішні відступи (а для списків <li> ще й прибрати маркери list-style: none;). Якщо у батьківського контейнера є внутрішні відступи чи рамка їх теж треба врахувати, але зазвичай і рамку і padding у таких елементів прибирають.
Але підхід із фіксованими ширинами елементів не зовсім практичний. Наприклад у респонсивному дизайні треба, щоб ширини карток, адаптувалася під ширину контейнера. Наприклад ширина верстки варіюється від 600px до 1000px і ми хочемо, щоб дочірні блоки розташовувались у три стовпчики з проміжком в 10px, але при цьому рівномірно заповнювали простір батьківського контейнера по ширині.
Тому варто трохи підправити код.
Спочатку налаштуємо батьківський контейнер.
Напишемо формулу, як вираховується ширина дочірнього елемента (Вище ми навпаки вираховували ширину батьківського контейнера в залежності від ширини картки, а тут зворотна операція).
Щоб динамічно обчислювати ширину картки використаємо css-функцію calc(). Функція calc() дозволяє використовувати арифметичні операції для визначення значень властивостей. Вона може бути використана в будь-якому місці, де зазвичай можна використовувати числа, такі як ширина, висота, відступи, величина шрифту тощо. calc() дозволяє виразити значення за допомогою арифметичних операцій, що включають додавання, віднімання, множення та ділення.
Властивість flex-basis - це заміна width для flex-елементів.
Властивість align-content використовується для управління вирівнюванням рядків у flex-контейнері у випадку, коли відстань між ними (gap) більша за висоту рядка.
flex-start: Рядки вирівнюються з початку контейнера.
flex-end: Рядки вирівнюються з кінця контейнера.
center: Рядки вирівнюються по центру контейнера.
space-between: Рядки рівномірно розташовані вздовж осі контейнера, з відстанню між ними рівною gap.
space-around: Рядки розташовані рівномірно вздовж осі контейнера, з рівною відстанню до контейнера та gap на кожному боці.
space-evenly: Рядки розташовані рівномірно вздовж осі контейнера з рівною відстанню від контейнера, gap та між рядками.
