Все про властивості flexbox
Концепція властивостей Flexbox полягає в наданні можливості контейнеру автоматично змінювати ширину, висоту та порядок його елементів, щоб найкраще заповнити доступний простір. Це може бути дуже корисно для розміщення предметів у різних розмірах екрана та пристроях. Елементи розгортаються, щоб заповнити вільний простір, або стискаються, щоб уникнути переповнення.
Сітка CSS Flexbox для початківців
CSS - це одна з перших і найпростіших речей, які можна вивчити в веб-розробці та дизайні, але не помиляйтеся на її простоту через відсутність функцій. Він має ряд дивовижних функцій та можливостей, готових до використання, однією з них є його відносно новий модуль компонування: властивості Flexbox.
Властивості Flexbox - це одна з нових версій, доступних CSS3, і про неї можна багато дізнатися. Тут ми розбираємося з компонуванням та способом його використання. Перш ніж ми почнемо, ось короткий фон щодо властивостей Flexbox:
Що таке режими компонування?
Найпростіше кажучи, сітка CSS Flexbox - це режим компонування. CSS має ряд існуючих режимів компонування. Режим компонування блоку (як-от показ: блок) вже давно існує. Блокові макети - хороший вибір для стилістики повних документів. Насправді веб-браузер розглядає декілька елементів, таких як діви та абзаци, як рівень блоку за замовчуванням.
Ще один поширений режим компонування - вбудований. Сильний тег, вхідний тег та тег прив’язки - приклади елементів вбудованого рівня. Інструменти для розробників Google Chrome навіть дозволяють переглядати "обчислений стиль" елемента для визначення властивостей і значень CSS, застосованих до елементів, не встановлених явно розробником.
Відносно новіший макет Flexbox (гнучкий box) розроблений як більш ефективний метод розкладки, вирівнювання та розподілу простору між контейнерними предметами, навіть якщо розмір цих елементів динамічний або невідомий. Звідси термін "гнучка".
Концепція властивостей Flexbox
Найголовніше у властивостях Flexbox - це те, що він є напрямним. Хоча компонування блоку заснована на вертикалі, а вбудований макет - на горизонтальній основі, Flexbox не є жодним із них. Блоки та вбудовані пристрої добре працюють у правильних ситуаціях, але не мають гнучкості для підтримки складних чи великих додатків, особливо коли мова йде про зміну орієнтації, розтягування, зменшення, зміну розміру та інше зміна розмірів елементів.
Де використовуються властивості Flexbox?
Як і будь-який інший макет CSS, Flexbox найкраще використовувати в певних ситуаціях. Зокрема, це підходить для малих розмірів макетів та компонентів програми. Для макетів у більш масштабному масштабі вибір мудрого типу стане найбільш мудрим.
Чому Flexbox кращий?
Дуже багато розробників та дизайнерів надають перевагу властивостям Flexbox, коли вони можуть (іноді занадто часто!). Це тому, що властивості Flexbox простіші у використанні; позиціонування елементів набагато простіше, тому ви можете отримати складніші макети з меншим кодуванням. Іншими словами, це робить процес розвитку більш простим.
Посібник із властивостей Flexbox
Тепер, коли ви знаєте трохи про властивості Flexbox та як і чому він працює, ось детальний посібник щодо компонування. Модель макета складається з батьківського контейнера, який також називають "гнучкий контейнер". Безпосередні діти з цього контейнера називаються "гнучкими предметами".
Макет зазнав декількох ітерацій та змін синтаксису за останні роки, коли його проект був створений у 2009 році. Найновіша специфікація Flexbox підтримується у таких веб-браузерах:
- Opera 17+
- Internet Explorer 11+
- Mozilla Firefox 28+
- Google Chrome 29+
- Apple Safari 6.1+
- Android 4.4+
- iOS 7.1+
Термінологія, яка використовується у властивостях Flexbox
Ось перегляд основної термінології, що використовується в макеті властивостей Flexbox:
- Дисплей: Ця команда використовується для визначення flex контейнера. Він може бути вбудованим або блоковим, залежно від цього. Він також визначає вміст flex для всіх елементів у контейнері. Приклад:
.container (
дисплей: флекс; / * або inline-flex * /
)
- Порядок: елементи Flex викладаються за замовчуванням у вихідному порядку, але властивість 'order' може контролювати порядок, у якому елементи відображаються в контейнері. Приклад:
.item (
замовлення:;
)
- Згинання в напрямку: Цей порядок встановлює головну вісь, визначаючи напрямок, який гнучкі предмети розміщують у контейнері. Елементи гнучкості можна розкладати насамперед у вертикальному або горизонтальному напрямку. Приклад:
.container (
flex-напрям: рядок | рядок-зворотний | стовпець | стовпець-зворотний;
)
- Зростання гнучкості : Цей порядок визначає здатність елемента гнучкого автоматичного масштабування, якщо в ньому є простір. Він може приймати значення без одиниць і служити пропорцією. Це значення диктує, скільки місця повинен займати предмет у гнучкому контейнері. Наприклад, якщо для всіх елементів встановлено функцію flex-нарастання як 1, решта місця в контейнері буде розподілено однаково для всіх дітей. Якщо значення дорівнює 2, що залишився простір займе в два рази більше місця, ніж решта. Приклад:
.item (
гнучко-рости:; / * за замовчуванням 0 * /
)
- Flex-shrink: Це робить навпаки, коли гнучкість зростає, оскільки вона стискає гнучкі елементи, коли це необхідно. Приклад:
.item (
гнучка-усадка:; / * за замовчуванням 1 * /
)
- Flex-основа: Цей порядок визначає розмір елементів за замовчуванням до розподілу залишків місця. Це може бути довжина, як 5rem або 20%, або ключове слово. Ключове слово "авто" вказує на те, що ширина та висота виробу вимірюються, а ключове слово "вміст" вказує на те, що розмір елемента залежить від його вмісту. Приклад:
.item (
флекс-основа: | авто; / * автоматичне * * /
)
- Flex: Це комбінована стенограма для всіх перерахованих вище трьох властивостей: згинання-розростання, гнучка основа та згинання-зменшення. За замовчуванням "0 1 авто".
.item (
флекс: немає | (||)
)
- Вирівнювати вміст: Цей порядок визначає вирівнювання основної осі та допомагає розподілити додатковий вільний простір, якщо залишилося щось, коли елементи негнучкі або досягли максимального розміру. Це також допомагає контролювати вирівнювання елемента, коли є перелив.
.container (
виправдати-зміст: flex-start | згинальний кінець | центр | простір між | простір навколо;
)
- Вирівнювання елементів: використовується для визначення поведінки за замовчуванням компонування елементів згинання на поперечній осі поточної лінії. По суті це версія "виправдовувати зміст" на поперечній осі, яка перпендикулярна до головної осі. Приклад:
.container (
вирівнювання-елементи: flex-start | flex-end | центр | базовий рівень | розтягування;
)
- Вирівнювання вмісту: Цей порядок вирівнює лінії контейнера, якщо на поперечній осі є додатковий простір. Це схоже на "виправдати-зміст", але для поперечної осі замість основної осі. Якщо є лише один рядок гнучких елементів, ця властивість не має ніякого ефекту. Приклад:
.container (
вирівнювання вмісту: flex-start | flex-end | центр | простір між | простір навколо | розтягування;
)
Використання властивостей Flexbox
Щоб використовувати макет Flexbox, ви можете просто встановити властивість відображення на батьківському елементі HTML, як показано нижче:
.flex-контейнер (
дисплей: -webkit-flex; / * Сафарі * /
дисплей: флекс;
)
Якщо ви вважаєте за краще відображати як вбудований елемент, ви можете написати:
.flex-контейнер (
дисплей: -webkit-inline-flex; / * Сафарі * /
дисплей: inline-flex;
)
Цю властивість потрібно лише встановити на батьківський флеш-контейнер та його негайні елементи flex. Діти з контейнерів автоматично стануть гнучкими предметами.
Рекомендовані курси
- Онлайн-курс з безкоштовного jQuery
- Інтернет-курс з безкоштовного кутового JS
- Інтернет-навчання на Mudbox
- Сертифікаційне навчання у вільному рубіні
Властивості Flexbox - властивості Flex контейнера
Існує маса способів групування властивостей Flexbox, і найпростіший спосіб дізнатися про них - це розділити їх на властивості контейнерів та елементів Flex. Ми лише описали деякі властивості контейнера flex. Давайте подивимось на решту:
-
Згинальний напрямок: рядок або стовпець
Властивість згинального напрямку може бути викладена у вигляді стовпців вертикально або рядків по горизонталі. У напрямку рядка гнучкі елементи розміщуються за замовчуванням зліва направо. Зворотний рядок змінює цей напрямок справа наліво. Напрямок стовпця за замовчуванням знаходиться зверху вниз, а функція зворотного стовпця повертає його до напрямку знизу вгору.
-
Flex-обгортка: nowrap або wrap
Властивість flex-wrap керує, якщо діти контейнера flex розкладені декількома чи одиночними рядками та напрямок, у якому укладаються нові лінії. Значення nowrap бачить гнучкі елементи, що відображаються в одному рядку, скорочені відповідно до ширини контейнера за замовчуванням. Значення обгортання бачить гнучкі елементи, що відображаються в різних рядках у напрямку зліва направо або зверху вниз. Ви можете додати обернути назад, щоб змінити замовлення. Значенням за замовчуванням є nowrap.
-
Flex-flow
Ця властивість є, в основному, скороченням для встановлення властивостей згину та згинання разом. Значенням за замовчуванням є "рядок тепер". Приклад:
.flex-контейнер (
flex-flow: ||
)
-
Обґрунтуйте-зміст
Властивість виправдання вмісту має чотири значення: flex-start для вирівнювання елементів у лівій частині контейнера; флекс для вирівнювання елементів у правій частині; центр вирівняти з центром; пробіл - для вирівнювання елементів з рівним проміжком між ними, причому перший і останній елементи вирівнюються до країв контейнера; і простір для вирівнювання гнучких елементів з рівним проміжком навколо них, включаючи перший і останній елементи. Flex-start - це значення за замовчуванням.
-
Вирівняти елементи
Ця властивість має п'ять значень: розтягнути масштабування гнучких предметів, щоб заповнити всю ширину або висоту від початку хреста до поперечного кінця контейнера; флекс-старт для укладання елементів на перехресному старті; гнучкий кінець для укладання елементів на поперечному кінці; центр, щоб вирівняти елементи до центру поперечної осі; і базову лінію для вирівнювання елементів, щоб їх базові лінії були вирівняні. Stretch - це значення за замовчуванням.
-
Вирівняти зміст
Ця властивість вирівнює лінії гнучких контейнерів, коли в осі поперечини є додатковий простір. Його значення такі: розтягнути, щоб розподілити простір після кожного ряду; флекс-старт для укладання предметів у напрямку поперечного старту; flex-end для укладання елементів до хрестовини; центр для укладання предметів у центрі поперечної осі; простір навколо, щоб рівномірно розподілити простір навколо гнучких предметів. Значенням за замовчуванням є stretch.
Властивості Flexbox - властивості елемента Flex
Тепер, коли ви знаєте про властивості контейнера Flexbox, давайте розглянемо властивості елемента:
- Замовлення
Ця властивість контролює порядок появи дітей із гнучким контейнером. Вони впорядковані у контейнері flex за замовчуванням.
.flex-item (
замовлення:;
)
Ви можете переупорядкувати гнучкі елементи, не потребуючи перебудови HTML-коду. Значення за замовчуванням дорівнює нулю.
- Вирівняти себе
Це властивість дозволяє переопрацювати вирівнювання за замовчуванням конкретного елемента flex. Ви можете використовувати значення для елементів вирівнювання для цієї властивості.
.flex-item (
вирівнювати-само: авто | флекс-старт | flex-end | центр | базовий рівень | розтягування;
)
Автоматичне значення в align-self обчислюється значенням елементів-елементів align у батьківському елементі. Якщо елемент не має батьківського, замість цього використовується розтяжка.
Основні приклади
Це все, що потрібно знати для використання макета сітки CSS Flexbox. Тепер настав час практикувати те, що ви дізналися. Ось кілька прикладів, які показують, як всі ці властивості поєднуються. Почнемо з чогось абсолютно простого:
чітко (
дисплей: флекс;
висота: 300px;
)
.child (
ширина: 100px;
висота: 100px;
маржа: авто;
)
Це приклад ідеального центрування. Значення висоти та ширини можна змінювати за своїм бажанням. Ключовим тут є встановлення поля на "авто", щоб гнучка ємність автоматично поглинала будь-який додатковий простір. Досить просто!
Тепер перейдемо до додавання ще декількох властивостей: списку з шістьма елементами фіксованих розмірів, які можна автоматично змінити. Вони повинні бути рівномірно розподілені до горизонтальної осі.
.flex-контейнер (
дисплей: флекс;
виправдати-зміст: простір навколо;
)
Далі спробуємо централізувати правильну навігацію для екранів середнього розміру та зробити її одноколонною на невеликих пристроях.
/ * Великий * /
.навігація (
дисплей: флекс;
flex-flow: обертання рядків;
виправдати-зміст: флекс-енд;
)
/ * Середні екрани * /
@media all і (максимальна ширина: 800 пікселів) (
.навігація (
виправдати-зміст: простір навколо;
)
)
/ * Малі екрани * /
@media all і (максимальна ширина: 500 пікселів) (
.навігація (
флекс-напрямок: стовпчик;
)
)
Час зробити цей крок далі! Спробуємо макет-перший макет із трьома стовпцями, з повна ширина колонтитула та заголовка та незалежний від порядку джерела.
.wrapper (
дисплей: флекс;
flex-flow: обертання рядків;
)
/ * Ми говоримо, що всі предмети мають ширину 100% * /
.header, .main, .nav, .aside, .footer (
згинання: 1 100%;
)
/ * Ми покладаємось на замовлення джерела для мобільного першого підходу * /
/ * Середні екрани * /
@media all і (мінімальна ширина: 600 пікс.) (
.aside (flex: 1 авто; )
)
/ * Великі екрани * /
@media all і (мінімальна ширина: 800 пікселів) (
.main (flex: 2 0px; )
.aside-1 (порядок: 1; )
.main (порядок: 2; )
.aside-2 (порядок: 3; )
.footer (порядок: 4; )
)
Висновок
Це лише декілька основних прикладів. Ви можете пограти набагато більше з макетами сітки CSS Flexbox, і вони абсолютно безцінні, якщо ви хочете зробити чуйну веб-сторінку.
Рекомендовані статті
Ось ось кілька статей, які допоможуть отримати більш детальну інформацію про властивості flexbox, код flexbox, а також про сітку css flexbox, тому просто перейдіть за посиланням, яке наведено нижче.
- HTML проти XML - основні відмінності
- CSS3 проти CSS - чим вони відрізняються? (Інфографіка)
- HTML у порівнянні з CSS Основні відмінності
- HTML5 проти Flash