Вступ до цієї статті читайте тут:

Вступ до CSS Flexbox

Ще раз наведу приклад схематичної зображення блокової моделі Flex, так як до термінів позначеними на ній ми будемо посилатися нижче.

Блокова модель Flexbox
Блокова модель Flexbox

Властивості для батьківського елемента
(flex container)

display

Ця CSS властивість має багато можливих значень, але для включення Flexbox є два: flex та inline-flex. Можна здогадатися, що перше включає блоковий режим взаємодії з навколишніми елементами, а друге аналогічне inline-block. Зізнатися, за весь час використання flex моделі для верстки сторінок та створення сайтів загалом, я ще жодного разу не використав inline-flex.

Без установки цієї якості, всі інші втрачають сенс.

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

flex-direction

Ця властивість може змінювати напрямок головної осі (main axis), вздовж якої розташовуються флекс елементи (flex item).

Можливі закінчення:

  • row – це значення за замовчуванням, і має елементи зліва направо;
  • row-reverse – справа наліво;
  • column – зверху донизу;
  • column-reverse – знизу нагору.
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

Ця властивість дозволяє дочірнім елементам (flex item) розміщуватися в кілька рядів (або колонок якщо задана властивість flex-direction: column | column-reverse;), тому що, за замовчуванням, вони будуть розміщуватися в один ряд (або колонку).

Доступні значення:

  • nowrap – це значення за промовчанням, всі дочірні елементи (flex item) розміщуватимуться у одну лінію, горизонтально чи вертикально;
  • wrap – елементи загортатимуться на нову лінію зверху вниз;
  • wrap-rewerse – як і для попередньої якості, але знизу нагору.
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content

Дуже корисна і часто використовувана властивість. Воно визначає, як елементи вирівнюватимуть усередині контейнера вздовж головної осі (main axis).

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

Наведу тільки найчастіші значення:

  • flex-start – це значення за промовчанням та елементи вирівнюються за карою main start (за замовчуванням ліворуч);
  • flex-end – вирівнювання за main end (протилежно до попередньої властивості);
  • center – по центру;
  • left – по лівому краю;
  • right – по правому краю;
  • space-between – елементи розподіляються рівномірно по головній осі, перший на її початку, останній в кінець;
  • space-around – теж, що й попереднє, але перед першим елементом і після останнього теж є порожній простір, що дорівнює половині відстані між блоками;
  • space-evenly – елементи розташовуються, щоб між самими блоками і між блоками і контейнером були однакові просвіти.
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items

Ця властивість також відповідає за вирівнювання елементів, але на відміну від попереднього, вирівнювання здійснюється вздовж поперечної осі (cross axis). Воно працює завжди, незалежно, обмежені ширини блоків чи ні.

Ця властивість має такі значення:

  • stretch – це значення за замовчуванням і змушує блоки flex item займати весь доступний простір по поперечній осі;
  • flex-start – блоки вирівнюються на краю cross start;
  • flex-end – по протилежному караю cross end;
  • center – елементи розміщуються у центрі;
  • baseline – елементи розміщуються, щоб їх базисні лінії збігалися.
.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

align-content

Ця властивість працює, коли флекс елементи загортаються в кілька рядів або колонок і діє типу justify-content але робить ефект не на елементи, а на ряди в цілому і по поперечній осі.

Найчастіші значення:

  • flex-start– ряди притиснуті до початку поперечної осі (cross start);
  • flex-end – до кінця поперечної осі;
  • center – дочірні елементи розміщуються у середині;
  • space-between – перший ряд притискається до cross start, останній до cross end, решта розміщується так, щоб між радами був однаковий простір;
  • space-around – схоже не попереднє значення, але перед першим та останнім рядами теж залишається простір;
  • space-evenly – елементи розміщуються так, щоб між ними, на всі боки було однакове просторстоо;
  • stretch – ряди займають весь доступний простір.
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

flex-flow

Це короткий запис для flex-direction та flex-wrap. Значення за умовчанням збігаються із значеннями відповідних властивостей.

.container {
  flex-flow: row nowrap; /* Значення за замовчуванням */
}

Властивості для дочірніх елементів
(flex item)

flex-grow

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

Допустиме значення для цієї властивості це ціле число від нуля і вище. Значення за замовчуванням нуль елемент не буде розширюватися.

Якщо у всіх елементів у контейнері буде однакове (більше за нуль) значення цієї властивості, то вільний простір буде рівномірно розподілено між ними. Якщо ні, то вільний простір розподілятиметься пропорційно цим числам.

.item {
  flex-grow: 1;
}

flex-shrink

Є аналогічним до попереднього, але визначає можливість елемента стискатися. Типово одиниця.

.item {
  flex-shrink: 2;
}

flex-basis

Ця властивість визначає ширину елемента. Допускається цифрове значення розмірних одиницях або 'auto'.

.item {
  flex-basis: auto | 20% | 300px;
}

flex

Це скорочений запис попередніх трьох властивостей і визначаються у такому порядку. Стандартне значення '0 1 auto'. Обов’язковим є лише перший аргумент. Рекомендується використовувати саме коротку версію при верстці, так як це дозволяє наочно визначити дані властивості і робить ваш CSS більш коротким.

.item {
  flex: none | flex-grow flex-shrink flex-basis
;
}

align-self

Ця властивість аналогічна align-items, має ті ж властивості і працює так само. Єдина відмінність, у тому, що там вирівнювання визначається для всіх елементів (flex item) відразу, а тут, індивідуально для кожного елемента.

order

Використовуючи властивість order, можна змінити порядок дочірніх елементів незалежно від їх фізичного розміщення в HTML коді. Допускаються будь-які цілі числа. Значення за замовчуванням нуль, у такому разі порядок буде таким, яким він є в коді.

.item:first-child {
  order: 2;
}
.item:last-child {
  order: 1;
}




Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.