Flexbox: властивості контейнера

Raisa Kravets -

 

Робота з flexbox

Flexible Box Layout (Flexbox) - це CSS-модуль, який визначає набір властивостей для розміщення, вирівнювання і розподілу простору між елементами в контейнері, навіть якщо їх розмір невідомий або динамічний

Основна ідея полягає в тому, щоб розділити елементи на блок-контейнер (flex-контейнер) і його дітей (flex-елементи).

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

У flex-контейнері скасовується більшість правил розташування елементів за їх типом і потоком документа.

  • Елементи втрачають «тип», перестають бути рядковими або блоковими.
  • Блокові елементи перестають розташовуватись вертикально один під одним.
  • Крайні відступи на стику з межею батька не випадають.
  • Вертикальні відступи елементів не схлопуються.
  • Працюють автоматичні вертикальні відступи.

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


  • main axis - головна вісь flex-контейнера, вздовж якої розташовуються елементи. Вона не обов'язково горизонтальна, її напрямок контролюється властивістю flex-direction.
  • main-start і main-end - елементи в контейнері завжди розташовуються від main-start (початок головної осі) і до main-end (кінець головної осі).
  • cross axis - поперечна вісь, яка завжди перпендикулярна до головної осі. Її напрямок залежить від головної осі і явно не встановлюється.
  • cross-start і cross-end - початок і кінець поперечної осі, вздовж якої розташовуються рядки елементів.

Flex-контейнер

Flex-контейнер (далі просто контейнер) - це батько групи елементів, яким необхідно змінити порядок розташування. Саме властивості контейнера контролюють напрямок осей, багаторядковість і позиціонування елементів в рядку.

У flex-контейнера є дві осі: головна вісь і перпендикулярна їй. По замовчуванню  всі елементи розташовуються вздовж  головної осі: зліва направо. 

Тому вкладені блоки у контейнер  вирівнюються в лінію, коли застосовується властивість  display: flex.

Flex-контейнер не є блоковим контейнером, тому для дочірніх елементів не працюють такі CSS-властивості, як float, clear, vertical-align. 

Також, на flex-контейнер не впливають властивості column- *, що створюють колонки в тексті і псевдоелементи :: first-line і :: first-letter.

Щоб почати використовувати модель Flexbox, необхідно спочатку визначити контейнер Flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Батьківський контейнер стає гнучким, якщо для нього встановити  властивість display з  значенням Flex:

.flex-container {
  display: flex;
}

See the Pen flex-container by kravets (@raisa69) on CodePen.

Практичне завдання 1: виконати вказівки, вказані у коментарі css на застосування властивостей flexbox

Властивості контейнера Flex:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

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

Елементи можуть розташовуватися за двома основними напрямками - як рядки по горизонталі або як стовпці по вертикалі.

ЗначенняОпис
rowГоловна вісь спрямована зліва направо. Елементи розташовані в ряд, за умовчанням притиснуті до лівого краю, їхня нумерація має звичайний порядок - зліва направо.
row-reverseГоловна вісь направлена ​​зправа наліво. Елементи розташовані в ряд, за замовчуванням притиснуті до правого краю, їх нумерація має зворотний порядок - зправа наліво.
columnГоловна вісь спрямована зверху донизу. Елементи розташовані в колонку, за замовчуванням притиснуті до верху, їхня нумерація має звичайний порядок - зверху вниз.
column-reverseГоловна вісь спрямована знизу нагору. Елементи розташовані в колонку, за замовчуванням притиснуті до низу, їх нумерація має зворотний порядок - знизу вгору.



Зі значенням row flex-елементи розташовуються в ряд зліва направо

.flex-container {
  flex-direction: row;
}


При значенні row-reverse flex-елементи розташовуються в ряд справа наліво

Зі значенням column flex-елементи розташовуються в колонку зверху вниз. Головна вісь направлена зверху-вниз! Поперечна зліва-направо!

.flex-container {
  flex-direction: column;
}

При значенні column-reverse flex-елементи розташовуються в колонку від низу до верху.

See the Pen flex-direction: column by kravets (@raisa69) on CodePen.

flex-wrap


Вихідна концепція flexbox - це контейнер для установки своїх елементів в один рядок. Якщо flex-контейнер має свої елементи в один або кілька рядків, то властивість flex-wrap керує напрямком, в якому ці нові рядки розташовуються. 

Значення:

.flex-container {
  flex-wrap: nowrap;
}

flex-елементи відображаються в один рядок, за замовчуванням вони зменшуються, щоб відповідати ширині flex-контейнера:


.flex-container {
  flex-wrap: wrap;
}

flex-елементи відображаються в кілька рядків, якщо це необхідно, зліва направо і зверху вниз:


See the Pen Flex-wrap: wrap; by kravets (@raisa69) on CodePen. 

.flex-container {
  flex-wrap: wrap-reverse;
}

flex-елементи відображаються в кілька рядків, якщо це необхідно, зліва направо і знизу вгору.


Властивості вирівнювання елементів всередині контейнера

justify-content

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

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

Значення:

.flex-container {
  justify-content: flex-start;
}

flex-елементи вирівнюються по лівій стороні flex-контейнера:

.flex-container {
  justify-content: flex-end;
}

flex-елементи вирівнюються по правій стороні flex-контейнера:

.flex-container {
  justify-content: center;
}

flex-елементи вирівнюються по центру flex-контейнера:


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

flex-елементи відображаються з рівним інтервалом між ними, перший і останній flex-елементи вирівнюються по краях flex-контейнера:


.flex-container {
  justify-content: space-around;
}

flex-елементи відображаються з рівним інтервалом навколо кожного flex-елемента, включаючи перший і останній:


See the Pen justify-content: center; by kravets (@raisa69) on CodePen.

align-items

Властивість align-items використовується для вирівнювання елементів Flex по вертикалі.

Flex-елементи можуть бути вирівняні уздовж поперечної осі поточного рядка flex-контейнера, подібно justify-content, але в перпендикулярному напрямку. 

Значення:

.flex-container {
  align-items: stretch;
}

flex-елементи заповнюють всю висоту (або ширину) від поперечного початку до поперечного кінця flex-контейнера:


.flex-container {
  align-items: flex-start;
}

flex-елементи розташовуються у поперечного початку flex-контейнера.


.flex-container {
  align-items: flex-end;
}

flex-елементи розташовуються у поперечного кінця flex-контейнера:

.flex-container {
  align-items: center;
}

flex-елементи розташовуються в центрі поперечної осі flex-контейнера.

.flex-container {
  align-items: baseline;
}

flex-елементи вирівнюються таким чином, щоб їх базові лінії були вирівняні.

align-content

Властивість align-content вирівнює рядки всередині flex-контейнера, коли в поперечної осі є додатковий простір, подібно до того, як justify-content вирівнює окремі елементи по головній осі.

Значення:

.flex-container {
  align-content: stretch;
}

flex-елементи відображаються з додатковим простором після кожного рядка flex-елементів.

.flex-container {
  align-content: flex-start;
}

flex-елементи розташовуються стопкою біля поперечного початку flex-контейнера:


.flex-container {
  align-content: flex-end;
}

flex-елементи розташовуються стопкою біля поперечного кінця flex-контейнера:

.flex-container {
  align-content: center;
}

Рядки flex-елементів розташовуються в центрі поперечної осі flex-контейнера:

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

Рядки flex-елементів відображаються з рівним інтервалом між ними, перша і останній рядки вирівнюються по краях flex-контейнера:

.flex-container {
  align-content: space-around;
}

flex-елементи відображаються з рівним інтервалом навколо кожного рядка:

Алгоритм горизонтального розміщення елементів з застосуванням Flexbox

1. Створити контейнер для елементів, це може бути блок,  маркований список (div, header, nav, section, aside, ul)
2. Створити дочірні елементи (флек-елементи) у середині контейнера (div, li)
3. Застосувати css-властивість для контейнера display: flex;
4. Розташувати у контейнері флекс-елементи уздовж головної осі за допомогою властивості justify-content (space-between,  space-around, center)
5. Розташувати флекс-елементи нащадків уздовж допоміжної осі за допомогою властивості align-items (center, baseline, flex-start, flex-end)


Flexbox властивості контейнера

Гра для вивченя Flexbox-властивостей:

Гра для вивчення Flexbox-властивостей Flexbox Defense

Гра полягає в тому, щоб зупинити вхідних ворогів не пройти повз захист. На відміну від інших ігор оборони, потрібно розташувати свої вежі за допомогою CSS!

    Демонстрація роботи властивостей Flexbox   


            


Завдання 1

Розташувати  флекс-елементи у флекс-контейнері за зразком як на зображенні. Вихідні дані для флекс-контейнера:
  • width: 900px;
  •  height: 400px;
  •  margin: 20px auto;
  •  border: 1px solid red;
Флекс-елементи:
  • width: 120px;
  • height: 60px;
  • border: 1px solid green;







Завдання 2

  1.  Зробити розміщення 3-х елементів з класом box в один ряд з відстанню між сусідніми елементами 30px без використання margin. Для цього задай елементу з класом container властивості з відповідними значеннями:

  • display для того, щоб flex модель застосувалася до нащадків;
  • justify-content для додавання рівних відступів між блоками.

2. Розмістити текст (цифру) по центру елемента з класом box. Для цього задати елементу з класом box відповідні значення властивостям

  • display для того, щоб flex модель застосувалася до нащадка - тексту;
  • justify-content для центрування за горизонталлю;
  • align-items для центрування за вертикаллю.  

See the Pen flex-container-task2 by kravets (@raisa69) on CodePen.

Завдання 3

Зробити розміщення по 3 елементи з класом box в один рядок з відстанню між сусідніми елементами 30px без використання margin. І з нижнім відступом 15px.

Для цього задати:

  • елементу з класом container властивість flex-wrap зі значенням для перенесення нащадків на новий рядок;
  • елементу з класом box властивість margin-bottom зі значенням відступу.

Увага:  в елемента з класом container значення властивості padding - 15px застосовується до трьох сторін і не застосовується до padding-bottom

See the Pen flex-container-task3 by kravets (@raisa69) on CodePen.


Тест на засвоєння властивостей Flexbox для контейнера:

   







Tags:
Нові Старіші