Принцип роботи властивості z-index і автоматичного margin у Flexbox

16

Від автора: Flexbox добре відомий тим, що відмінно вирішує такі завдання з макетами, як прилипають футеры і колонки однакової висоти. Крім цього, в Flexbox є і інші корисні, але менш відомі функції. Сьогодні ми їх і розглянемо!

Flexbox і властивість z-index

Ви вже, напевно, знаєте, що властивість z-index працює тільки на елементах з заданим позиціонуванням. За замовчуванням у всіх елементів задано position: static, тобто вони ніяк не спозиционированы. Позиціонувати елемент буде вважатися, якщо поставити одне з наступних значень: relative, absolute, fixed або sticky.

Однак неспозиционированным елементів типу флекс клітинок можна задати властивість z-index . Специфікації CSS Flexible Box Layout:

«Флекс осередку відмальовує точно так само, як инлайновые блоки [CSS21]. Відмінність тільки в тому, що тут використовується модифікований порядок в документі, а всі значення властивості z-index крім auto створюють контекст стека навіть при position: static.»

Погляньте на демо нижче, щоб зрозуміти принцип роботи:

Ми створили два елемента: .front і .back. В .front один дочірній елемент – блок з одиницею. Елемент .front абсолютно пропонується, точніше йому задано position: fixed, і елемент займає всю область перегляду.

Елемент .back є флекс контейнер, усередині якого розташовані два дочірніх елемента з цифрами 2 і 3. Згадуючи про що ми говорили вище, ми можемо задати флекс осередкам властивість z-index, навіть якщо вони ніяк не спозиционированы (тобто мають position: static).

Зверніть увагу, коли ми натискаємо на кнопку в демо вище, ми додаємо флекс осередкам властивість z-index: 2, тим самим піднімаючи їх над елементом .front.

Flexbox і автоматичний margin

Автоматичний margin на флекс клітинках вирішує основні проблеми з UI. Для початку припустимо, що ми хочемо створити ось такий стандартний хедер:

Принцип роботи властивості z-index і автоматичного margin у Flexbox

Для цього ми будемо використовувати Flexbox. Жодних обтеканий, фіксованої ширини і т. д. Розмітка:

LOGO

  • About
  • Projects
  • Contact
  • Facebook
  • Twitter

CSS

header {
background: #333;
}
nav {
display: flex;
align-items: center;
width: 90%;
max-width: 1200 px;
margin: 0 auto;
}
.menu {
margin-left: 60px;
margin-right: auto;
}

У нашому прикладі роль флекс контейнера виконує елемент nav, а логотип, основне меню і кнопки соціальних мереж є флекс осередками. На картинці вище перші два елементи вирівняні по лівій стороні флекс контейнера уздовж головної осі. Кнопки соціальних мереж ж вирівнюються по правій стороні також уздовж основної осі.

Єдиний спосіб вирівняти елементи таким чином це використовувати margin-right: auto на основному меню. Одним рядком коду ми переписуємо стандартне вирівнювання кнопок соціальних мереж і притискаємо їх до правого краю контейнера. Точно так само використовуємо властивість align-self і переписуємо стандартне вирівнювання флекс комірок уздовж осі.
Крім автоматичного зовнішнього відступу є ще один метод. Насамперед необхідно видалити властивість margin-right у меню і прописати там flex-grow: 1.

Результат майже однаковий, але є одна істотна відмінність. У першому випадку у меню заздалегідь вирахувана ширина. Тобто, при ширині вікна в 1100 px ширина меню буде приблизно така:

Принцип роботи властивості z-index і автоматичного margin у Flexbox

У другому методі ширина меню збільшується, так як ми задали властивість flex-grow: 1. Нижче показана ширина меню при ширині вікна в 1100 px:

Принцип роботи властивості z-index і автоматичного margin у Flexbox

CodePen демо:

Тепер уявімо, що ми захотіли змінити макет. Ось наш новий макет:

Принцип роботи властивості z-index і автоматичного margin у Flexbox

Розмітка залишається без змін. Потрібно внести невеликі правки в CSS:

nav {
background: #333;
display: flex;
flex-direction: column;
height: 100vh;
width: 180px;
padding: 20px;
box-sizing: border-box;
}
.menu {
margin-top: 60px;
margin-bottom: auto;
}

У новому прикладі меню соціальних мереж притиснуто до нижньої межі батьківського блоку. Зроблено це з допомогою додавання властивості margin-bottom: auto до основного меню. Можна було б використовувати flex-grow: 1, але в такому випадку збільшиться висота меню.

Тут варто сказати також про те, що якщо в будь-якому з наших прикладів застосувати властивість justify-content, результат буде той же. Результат буде такий же, тому що ми використовуємо автоматичний margin для вирівнювання флекс осередків. Властивість justify-content спрацює тільки, якщо видалити автоматичні зовнішні відступи. Специфікації:

«Властивості вирівнювання не будуть працювати, якщо розподіл простору задано за допомогою автоматичних зовнішніх відступів. Це відбувається з-за того, що автоматичний margin забирає весь вільний простір, що залишився після застосування Flexbox.»

Тепер давайте створимо ще одну варіацію нашого хедера:

Принцип роботи властивості z-index і автоматичного margin у Flexbox

Зробити це можна без особливих проблем, задавши властивість justify-content: space between на флекс контейнері. Однак точно такий же макет можна зробити за допомогою автоматичних зовнішніх відступів. Потрібно всього лише прописати властивість margin: 0 auto головному меню.

Висновок

У цій статті ми дізналися про два мало відомих трюку з Flexbox. Перш ніж прощатися підіб’ємо підсумок:

Властивість z-index можна застосовувати до флекс осередкам, навіть якщо у них встановлено властивість position: static.

Для вирівнювання флекс комірок уздовж головної осі можна використовувати автоматичний margin.