Основи Flexbox

5.1 Основні концепції Flexbox

Flexbox (Flexible Box Layout) — це потужна система компонування CSS, яка надає гнучкі та ефективні способи розподілу простору та вирівнювання елементів всередині контейнера. Flexbox особливо корисний для створення складних макетів і адаптивного дизайну. Зараз ми розглянемо основи Flexbox, включаючи створення Flex-контейнерів та елементів, а також використання властивості display: flex;.

Основні концепції Flexbox

Flexbox складається з двох ключових компонентів:

• Flex-контейнер: батьківський елемент, який включає в себе Flex-елементи.
• Flex-елементи: дочірні елементи всередині Flex-контейнера, які вирівнюються та розподіляються згідно з правилами Flexbox.

Flex-контейнер

Flex-контейнер створюється за допомогою властивості display: flex; або display: inline-flex; Flex-контейнер керує розташуванням своїх дочірніх елементів (Flex-елементів) і надає безліч можливостей для їх вирівнювання та розподілу.

    
      .container {
        display: flex; /* або inline-flex */
      }
    
  

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

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

• .container: Flex-контейнер, створений за допомогою display: flex;. Всередині цього контейнера елементи вирівнюються та розподіляються згідно з правилами Flexbox
• .item: Flex-елементи, які є дочірніми елементами Flex-контейнера

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

Властивість display: flex; визначає елемент як Flex-контейнер. Дочірні елементи цього контейнера автоматично стають Flex-елементами та починають слідувати правилам Flexbox.

display: flex;

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

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

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

    
      .inline-container {
        display: inline-flex;
      }
    
  

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

      <div class="inline-container">
        <div class="item">Елемент 4</div>
        <div class="item">Елемент 5</div>
      </div>
    
  

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

• inline-container — це Flex-контейнер, створений за допомогою display: inline-flex; Всередині цього контейнера елементи вирівнюються та розподіляються згідно з правилами Flexbox. Контейнери поводять себе як строчні елементи та розташовуються поруч один з одним.

5.3 Властивості Flex-елементів

1. Властивість flex — це скорочений запис для задання flex-grow, flex-shrink та flex-basis. Воно дозволяє керувати тим, як Flex-елементи розтягуються та стискаються, щоб заповнити доступний простір.

Синтаксис:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

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

    
      .item {
        flex: 1;
      }
    
  

2. Властивість order

Властивість order визначає порядок, в якому Flex-елементи розташовуються всередині Flex-контейнера. За замовчуванням усі елементи мають значення order: 0;.

Значення

Цілі числа. Елементи з меншим значенням будуть розташовуватись перед елементами з більшим значенням.

Синтаксис:

    
      .element {
        order: value;
      }
    
  

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

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

      .item-1 {
        order: 2;
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

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

• .item-1: має значення order: 2, тому буде розташовуватись після елемента з order: 1
• .item-2: має значення order: 1, тому буде розташовуватись першим
• .item-3: має значення order: 3, тому буде розташовуватись останнім