Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Напрямок осей

Напрямок осей

Frontend SELF UA
Рівень 17 , Лекція 2
Відкрита

6.1 Властивість flex-direction

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

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

Значення:

  • row: головна вісь йде горизонтально зліва направо (значення за замовчуванням)
  • row-reverse: головна вісь йде горизонтально справа наліво
  • column: головна вісь йде вертикально зверху вниз
  • column-reverse: головна вісь йде вертикально знизу вгору

Приклад використання

1. Елементи розташовуються горизонтально:

CSS 
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
      </div>
ALL IN ONE

2. Елементи розташовуються вертикально:

CSS 
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
      </div>

      <div class="container-column-reverse">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
      </div>

Пояснення коду:

  • .container-row: елементи розташовуються горизонтально зліва направо
  • .container-row-reverse: елементи розташовуються горизонтально справа наліво
  • .container-column: елементи розташовуються вертикально зверху вниз
  • .container-column-reverse: елементи розташовуються вертикально знизу вгору

6.2 Властивість flex-wrap

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

Значення

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

Приклади використання

Значення nowrap:

Елементи не переносяться і розташовуються в один рядок/стовпець (значення за замовчуванням).

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
        <div class="item">Елемент 4</div>
      </div>

Значення wrap:

Елементи переносяться на новий рядок/стовпець за потреби.

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
        <div class="item">Елемент 4</div>
      </div>

Значення wrap-reverse:

Елементи переносяться на новий рядок/стовпець у зворотному порядку.

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
        <div class="item">Елемент 4</div>
      </div>

Пояснення коду:

  • .container-nowrap: Flex-елементи розташовуються в один рядок, навіть якщо вони виходять за межі контейнера
  • .container-wrap: Flex-елементи переносяться на новий рядок, якщо не вміщаються в один рядок
  • .container-wrap-reverse: Flex-елементи переносяться на новий рядок у зворотному порядку

6.3 Використання flex-direction і flex-wrap

Властивості flex-direction і flex-wrap можна комбінувати за допомогою скороченої властивості flex-flow. Це властивість дозволяє задавати напрямок осі і перенесення елементів одночасно.

Синтаксис:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Приклад використання:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
        <div class="item">Елемент 4</div>
        <div class="item">Елемент 5</div>
      </div>

Пояснення коду:

  • .container: Flex-контейнер зі спільним використанням flex-direction: row; і flex-wrap: wrap;, що означає, що елементи розташовуються по горизонталі і переносяться на новий рядок за потреби
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ