Робота з Flexbox в гіфці

Flexbox так і напрошується на те, щоб створювати з нього візуальні шпаргалки. Сьогодні ми пропонуємо вам переклад статті Скотта Домеса «Як працює Flexbox – у великих, яскравих анімованих гіфці», свого роду наочний посібник.



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

Основний принцип Flexbox — гнучкі і інтуїтивні макети сторінок. Це досягається за рахунок того, що контейнери самі рівномірно розподіляють свої дочірні елементи включаючи їх розмір і простір між ними.

Ідея, в принципі, непогана. Але давайте подивимося, як це реалізується на практиці. У цій статті ми розглянемо 5 основних властивостей Flexbox. Ми опишемо, для чого вони потрібні, як ви можете їх використовувати, і до яких результатів вони в підсумку призводять.

Властивість № 1: Display: Flex

Ось наша інтернет-сторінка в якості прикладу:


У вас є чотири різнокольорові блоки різних розмірів в сірому контейнері. На даний момент для кожного блоку за замовчуванням визначено display: block. Кожен квадрат таким чином займає всю ширину своєї лінії.

Щоб почати роботу з Flexbox, вам треба перетворити свій контейнер в flex-контейнер. Це робиться наступним чином:

#container {
display: flex;
}


На перший погляд зміни незначні — ваші блоки відображаються тепер в инлайновом вигляді, тільки і всього. Між справою ви зробили великий крок. Ви створили для своїх блоків так званий flex-контекст.

Тепер ви можете розміщувати їх у цьому контексті — це набагато простіше, ніж при роботі з традиційним CSS.

Властивість № 2: Flex Directon

У flexbox-контейнера є дві осі: головна вісь і вісь перпендикулярна, які за замовчуванням виглядають наступним чином:


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

#container {
display: flex;
flex-direction: column;
}



Слід підкреслити: flex-direction: column не має квадрати на перпендикулярній осі замість головної осі. Це властивість змінює напрямок головної осі з горизонтального у вертикальне.

У flex-direction є й інші значення: row-reverse і column-reverse.


Властивість № 3: Justify Content

Justify Content задає вирівнювання елементів по головній осі.

Тут відмінність головною і перпендикулярної осі слід розглянути докладніше. Спочатку повернемося до flex-direction: row.

#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

У Justify Content є п'ять значень:

  • Flex-start
  • Flex-end
  • Center
  • Space between
  • Space-around


Space-around і space between найменш інтуїтивні. Space between вирівнює елементи так, щоб вони розміщувалися на однаковій відстані один відносно одного, але не щодо контейнера.

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

І наостанок, пам'ятайте, що justify-content вирівнює елементи уздовж головної осі, а flex-direction змінює положення самої головної осі. Це буде важливо, коли ви перейдете до…

Властивість № 4: Align Items

Якщо ви освоїли justify-content, align-items не викличе у вас труднощів.

У той час як justify-content застосовується для головної осі, align-items задає вирівнювання елементів по перпендикулярній осі.



Задамо для flex-direction початкове значення row, щоб осі виглядали наступним чином.

Потім перейдемо до команд align-items.

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline
Перші три діють так само, як і для justify-content, так що з ними все просто.

Наступні дві дещо відрізняються.

При заданому значенні stretch елементи займають весь вільний простір по перпендикулярній осі. Якщо задано baseline, підстави тегів абзацу вирівнюються.



(Для align-items важливо наступне: при значенні stretch треба задати висоту квадратів автоматично, інакше вона буде змінити ширину.)

Що стосується baseline, майте на увазі: якщо ви прибираєте теги абзацу, то будуть вирівнюватися підстави квадратів, як у прикладі:



Щоб краще продемонструвати функціонування головної та перпендикулярної осі, комбінуємо justify-content та align-items і подивимося, як значення center впливає на кожну з команд flex-direction:



При row квадрати вирівнюються вздовж головної горизонтальної осі. При column вони розташовуються уздовж вертикальної головної осі.

Навіть якщо квадрати центровані і вертикально і горизонтально в обох випадках, ці дві команди не взаємозамінні!

Властивість № 5: Align Self

Align Self дозволяє вручну керувати вирівнюванням одного конкретного елемента.

Це властивість анулює значення align-items для вибраного квадрата. Всі властивості — ті ж, але за замовчуванням виставляється auto, при якому значення аналогічні align-items контейнера.

#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.

Давайте подивимося, як це буде виглядати. Ви застосовуєте align-self до двох квадратах, а для решти застосовуєте align-items: center і flex-direction: row.



Висновок

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

Спасибі за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.