Quick hits with the Flexible Box Model

Вступ

Ви напевно витрачали багато годин на горизонтальну або вертикальну організацію елементів на сторінці за допомогою стилів. До цього моменту в CSS не було відповідного механізму для виконання цього завдання. Але тепер є CSS 3 та Flexible Box Module (модель гнучкого вікна, скорочено Flexbox).

В проект специфікації Flexbox описується так:

[...] модель гнучкого вікна в CSS оптимізована для розробки інтерфейсів. Вона пропонує ще одну систему компонування елементів на додаток до вже наявної в CSS. [CSS21] У новій моделі дочірні елементи вікна компонуються в стовпчик або в рядок, а вільний простір можна розподілити між ними за допомогою атрибута flex або призначити одному з них. Вкладені вікна (горизонтальні всередині вертикальних або вертикальні всередині горизонтальних) можна використовувати для створення двовимірних схем компонування. Ця модель заснована на моделі вікон в мові користувацького інтерфейсу XUL, який застосовується в багатьох додатках на базі Mozilla (наприклад, в браузері Firefox).

Звучить непогано. Але що з цього можете винести ви як розробник - немає, як веб-архітектор ™?

1. Можете сміливо забути про плаваючі елементи.
2. Верстати сторінки зі складною компонуванням елементів стало простіше і зручніше.
3. Ми можемо розміщувати елементи на сторінці, як побажаємо, а всі обчислення за нас робить браузер.

У моделі Flexbox у властивості display з'являється нове значення (box), а також додається ще вісім властивостей, перерахованих нижче.

• box-orient
• box-pack
• box-align
• box-flex
• box-flex-group
• box-ordinal-group
• box-direction
• box-lines

Вісім нових властивостей? Куди нам стільки? Давайте розбиратися.

Загальні властивості стилів в моделі Flexbox

стилі вікон

display: box Нове значення стилю display переводить цей об'єкт і його безпосередні дочірні елементи в модель гнучких вікон. Модель обробляє тільки безпосередні дочірні об'єкти. box-orient Значення: horizontal | vertical | inherit Як ​​розташувати дочірні вікна? Вводяться два додаткових значення: inline-axis (за замовчуванням) і block-axis, які відповідають за горизонтальну і вертикальну компоновку відповідно. box-pack Значення: start | end | center | justify Це властивість відповідає за розташування вмісту вікна щодо осі box-orient. Якщо вісь box-orient горизонтальна, то дочірні вікна вирівнюються по горизонталі, і навпаки. box-align Значення: start | end | center | baseline | stretch Це властивість схоже на box-pack. Воно призначене для розміщення дочірніх елементів у вікні. Якщо обрана горизонтальна орієнтація, воно відповідає за вертикальне вирівнювання, і навпаки.

Стилі дочірніх вікон

box-flex Значення: 0 | будь-яке ціле число Ступінь гнучкості дочірнього елемента. Якщо для одного дочірнього об'єкта встановлено значення 1, а для іншого 2, то другий елемент буде займати в батьківському вікні в два рази більше додаткового вільного місця, ніж перший. За замовчуванням використовується нульове значення гнучкості.

Ми не будемо розглядати властивості box-flex-group, box-ordinal-group, box-direction і box-lines, тому що більшість завдань в моделі Flexibox виконується і без них. Щоб дізнатися, як вони працюють, скористайтеся посиланнями в укладанні .

Примітка до синтаксису. У поточній реалізації Flexibox для браузерів, що використовують модулі відображення WebKit і Gecko, необхідно додавати відповідні префікси. У цьому керівництві вони для простоти опущені. Докладніше про це див в розділі підтримка браузерів .

Що таке гнучкість

Властивість box-flex задає абсолютну гнучкість дочірнього елемента і його гнучкість щодо інших об'єктів того ж рівня. Розглянемо його в дії. Для початку створимо три вікна. <Div id = "flexbox"> <p> child 1 </ p> <p> child 2 </ p> <p> child 3 </ p> </ div>

Припустимо, ми хочемо розташувати їх горизонтально один поруч з одним і зробити так, щоб вони були однакової висоти незалежно від змісту. Як би ми домоглися цього за допомогою традиційних інструментів? Швидше за все, ми зробили б текст плаваючим і, можливо, додали властивість overflow: hidden; в батьківське вікно, щоб приховувати зайве зміст. Така техніка використовується давно. Але за допомогою Flexbox це можна зробити набагато простіше:

#flexbox {display: box; box-orient: horizontal; }

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

Ширина дочірніх елементів не змінюється (використовується заданий або успадковане значення). Таким чином, якщо сумарна ширина всіх дочірніх вікон менше ширини батьківського вікна, вийде щось на зразок цього:

За замовчуванням дочірні елементи вікна Flexbox не є гнучкими. Як не дивно, саме завдяки цьому їх можна зробити такими. Але що якщо ми хочемо, щоб перше і друге дочірні вікна мали задану ширину, а третє розтягувалося на все, що залишилося? Flexbox дозволяє домогтися і цього:

#flexbox {display: box; box-orient: horizontal; } #Flexbox> p: nth-child (3) {box-flex: 1; }

Ми зробили останній дочірній елемент гнучким, і тепер він може розтягуватися при наявності вільного простору. Так як місце відведено тільки для одного елемента, він займе його цілком:

Зверніть увагу: елемент є гнучким тільки по одній осі - в даному випадку по горизонталі.

Значення box-flex відносно. Щоб зробити гнучкими другий і третій елементи, напишемо наступний код:

#flexbox {display: box; box-orient: horizontal; } #Flexbox> p: nth-child (2), #flexbox> p: nth-child (3) {box-flex: 1; }

В даному випадку вільне місце буде порівну розділено між цими двома елементами.

Тепер можна трохи поекспериментувати з властивістю box-flex всіх трьох дочірніх елементів: якщо присвоїти їм значення 1, 2 і 3, вони будуть розтягнуті в батьківському вікні в зазначених пропорціях. Але краще перевіримо це властивість на практиці.

простий приклад

Код і результат його виконання представлені нижче.

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

Тут використовуються всього два стилі: display: box переводить вікна в режим Flexbox, а box-flex: 1 робить дочірні елементи гнучкими, дозволяючи їм займати все вільне місце. Горизонтальна орієнтація вікон задана за замовчуванням, тому вказувати властивість box-orient: horizontal не обов'язково, проте краще це зробити. Властивість box-align відповідає за розтягування, тому елементи div займають все вільне місце по висоті в батьківському вікні. Зручно, правда? на сайті Рафаеля Геттера ця техніка використана для навігації.

А тепер трохи ускладнити завдання.

центрування елементів

Центрування об'єктів по вертикалі або горизонталі за допомогою таблиць стилів CSS з давніх пір є нетривіальне завдання. Якщо використовується тільки CSS, то краще рішення - поставити атрибути position: absolute; left: 50%; top: 50%; і вказати для лівого (верхнього) поля значення, що дорівнює половині ширини (висоти), але зі знаком мінус. Однак це рішення працює, тільки якщо явно задані розміри всіх елементів. Це не завжди зручно.

Джеймс Джон Малком написав нам, що для центрування по вертикалі існує спосіб як мінімум шестирічної давності, заснований на використанні атрибуту display: table-cell; (Ще в 2004 році про нього писав Душан Яновскі). Способи центрування по горизонталі і вертикалі докладно описані на цій сторінці . Вони працюють, навіть якщо розміри елементів не задані.

Однак Flexbox дозволяє вирішити цю задачу набагато простіше:

Ми не ставимо для дочірнього елемента властивість box-flex, тому що не хочемо, щоб він займав весь вільний місце. Нам потрібно, щоб він завжди знаходився в центрі, як би ми його не розтягували. Важливою перевагою є те, що не обов'язково ставити розміри, щоб помістити елемент в центр. Те ж саме можна зробити з блоковим або рядковим елементом, і все буде працювати.

підтримка браузерів

Уже уявляєте, як будете використовувати гнучкі вікна? На жаль, якщо ви робите сайти, які повинні працювати в будь-якому браузері, це навряд чи вийде. Модель Flexbox поки не підтримується в браузерах IE9 і Opera 10.60, однак згадується в оглядах платформи IE9, так що компанія Майкрософт рано чи пізно повинна реалізувати її.

На сайті Caniuse.com можна знайти список підтримуваних браузерів. Якщо не вдаватися в подробиці, це Firefox 3 (і вище), Safari 3 (і вище) і Chrome. Якщо ви розробляєте додатки для мобільних пристроїв на базі WebKit, модель Flexbox стане чудовою альтернативою звичним схемам компонування елементів.

Зрозуміло, поки що вона перебуває на експериментальному етапі, тому не забувайте про префікси браузерів:

/ * I wish it was as easy as this: * / display: box; box-orient: horizontal; box-pack: center; box-align: center; / * But in reality you'll need to do this: * / display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center;

Для тих, кому не хочеться набирати весь цей код, Алекс Рассел створив кілька допоміжних класів .

висновок

Навіть якщо опустити інші чотири властивості, модель Flexbox дає масу нових можливостей. Щоб дізнатися її ближче, ознайомтеся з прикладами і описами в блогах Isotoma і Mozilla Hacks . А тим, кого не бентежить велика кількість тексту, пропонуємо прочитати специфікацію Flexbox на сайті W3C . І головне - застосовуйте вивчене на практиці. Вдалої роботи!