flex

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

Спробуйте його в дії

Складові властивості

Ця властивість є скороченням наступних властивостей CSS:

• flex-grow
• flex-shrink
• flex-basis

Синтаксис

/* Значення – ключові слова */
flex: auto;
flex: initial;
flex: none;

/* Одне значення, число без одиниць вимірювання: flex-grow
flex-basis у такому разі дорівнює 0. */
flex: 2;

/* Одне значення, ширина чи висота: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* Два значення: flex-grow | flex-basis */
flex: 1 30px;

/* Два значення: flex-grow | flex-shrink */
flex: 2 2;

/* Три значення: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Глобальні значення */
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;

Властивість flex може бути задана у вигляді одного, двох чи трьох значень.

• Синтаксис одного значення: значення мусить бути одним з таких варіантів:

  • дійсне для <flex-grow> значення: тоді скорочення розгортається як flex: <flex-grow> 1 0.
  • дійсне для <flex-basis> значення: тоді скорочення розгортається як flex: 1 1 <flex-basis>.
  • ключове слово none, або одне з глобальних ключових слів.

• Синтаксис двох значень:

  • Перше значення мусить бути:

    • <number> – тлумачиться як <flex-grow>.

  • Друге значення мусить бути одним з таких варіантів:

    • дійсне для flex-shrink значення: тоді скорочення розгортається як flex: <flex-grow> <flex-shrink> 0.
    • дійсне для flex-basis значення: тоді скорочення розгортається як flex: <flex-grow> 1 <flex-basis>.

• Синтаксис трьох значень: значення мусять бути в наступному порядку:

  1. дійсне для flex-grow значення.
  2. дійсне для flex-shrink значення.
  3. дійсне для flex-basis значення.

Значення

initial

Елемент калібрується згідно зі своїми властивостями width і height. Він скорочується до свого мінімального розміру, аби вміститись у контейнер, але не росте для захоплення доступного в гнучкому контейнері вільного простору. Це рівносильно заданню "flex: 0 1 auto".

auto

Елемент калібрується згідно зі своїми властивостями width і height, але росте для захоплення доступного в гнучкому контейнері вільного простору, а також скорочується до свого мінімального розміру, аби в контейнері поміститися. Це рівносильно заданню "flex: 1 1 auto".

none

Елемент калібрується згідно зі своїми властивостями width і height. Він геть негнучкий: і не скорочується, і не росте щодо гнучкого контейнера. Це рівносильно заданню "flex: 0 0 auto".

<'flex-grow'>

Визначає flex-grow гнучкого елемента. Від'ємні значення вважаються недійсними. Коли упущено – вважається 1. (початкове значення – 0)

<'flex-shrink'>

Визначає flex-shrink гнучкого елемента. Від'ємні значення вважаються недійсними. Коли упущено – вважається 1. (початкове значення – 1)

<'flex-basis'>

Визначає flex-basis гнучкого елемента. Значення 0 мусить мати одиниці вимірювання, щоб не тлумачитись як гнучкість. Коли упущено – вважається 0. (початкове значення – auto)

Опис

У більшості випадків розробники повинні давати flex одне з наступних значень: auto, initial, none чи додатне число без одиниць вимірювання. Аби побачити в дії ці значення, спробуйте змінити розмір гнучких контейнерів нижче:

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>

* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}

Усталено гнучкі елементи не скорочуються до розмірів, менших за їх мінімальний розмір вмісту. Щоб це змінити, треба задати елементові min-width чи min-height.

Формальне визначення

Формальний синтаксис

none | [ <\'flex-grow\'> <\'flex-shrink\'>? || <\'flex-basis\'> ]

Приклади

flex: auto

Цей приклад демонструє те, як гнучкий елемент із flex: auto зростає, щоб зайняти вільний простір у контейнері.

HTML

<div id="flex-container">
  <div id="flex-auto">
    flex: auto (клацніть, аби показати чи прибрати звичайний елемент)
  </div>
  <div id="flex-initial">flex: initial</div>
</div>

CSS

#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
  padding: 1rem;
}
#flex-auto {
  flex: auto;
  border: 1px solid #f00;
}
#flex-initial {
  border: 1px solid #000;
}

JavaScript

const flexAuto = document.getElementById("flex-auto");
const flexInitial = document.getElementById("flex-initial");
flexAuto.addEventListener("click", () => {
  flexInitial.style.display =
    flexInitial.style.display === "none" ? "block" : "none";
});

Результат

Цей гнучкий контейнер вміщає два гнучкі елементи:

• "flex: auto" має flex зі значенням auto
• "flex: initial" має flex зі значенням initial

Елемент "flex: initial" займає стільки простору, скільки вимагає його ширина, але не розширюється, щоб зайняти більше. Весь вільний простір займає "flex: auto".

Коли клацнути "flex: auto", елемент "flex: initial" отримує властивість display зі значенням none, що прибирає його з макета. Потім елемент "flex: auto" розширюється, щоб зайняти ввесь доступний в контейнері простір.

Специфікації

Сумісність із браузерами

See also

• Посібник зі флексбокса CSS: Базові концепції флексбоксу
• Посібник зі флексбокса CSS: Контролювання співвідношень гнучких елементів за головною віссю