Що таке flexbox «витончений» спосіб створення макетів в «просунутому» столітті!

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

МАГАЗИН Лендінзі УНІВЕРСИТЕТ АКЦІЇ ВІД ПАРТНЕРІВ

Flexbox - це новий модельний метод моделювання в CSS3. Попередня версія CSS мала чотири методи макетування:

• Блок схема для макетування документів;
• Лінійна схема для моделювання текстів;
• Таблична схема для 2D табличних даних;
• Схема заданого позиціонування для точного розташування елементів.

Зараз, ви, можливо, думаєте «А як на рахунок методів позиціонування? Вони часто використовуються для макетування! »Гарна ідея, але методи позиціонування ніколи не були призначені для цього. CSS відновив їх зі старого сумісного з ним атрибута в HTML. Розумні веб-розробники знайшли їм інші способи використання для створення складних макетів, але вони обмежені і до того ж глючат - підтвердить будь-який, хто боровся з методами очищення Сlearfix.

CSS3 ввів два нових методи композиції в якості альтернативного використання методу позиціонування і таблиць:

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

Коротка історія створення Flexbox

Моя мета, поки я працював з Flexbox і пізніше з Grid, полягала в тому, щоб замінити всі ці божевільні позиції / таблиці / лінійні схеми і іншу нісенітницю, яку мені довелося освоїти як веб-розробнику. Все це лайно було (а) дурним, (б) важко запам'ятовується, і (в) обмеженим мільйонами дратівливими способами, і тому я хотів зробити кілька якісних макетних модулів, які б вирішували ті ж проблеми простими, легкими в - використання і доступними способами.

У двох словах: Flexbox і Grid були навмисно створені, щоб замінити метод позиціонування і табличну схему.

Є (чи ні) 3 Flexbox специфікації?

Ви, можливо, чули про трьох характеристиках Flexbox. (Які нагадують мені про цю сцену з Star Trek :)

Не дозволяйте йому налякати вас. Так, є три версії специфікації, але тільки одна з них дійсно має вагу:

Макети Flexbox «йдуть в одному напрямку»

Вибачте, дурний жарт.

Я сказав, що Flexbox має елементи в одному рядку або стовпці. Давайте поговоримо про те, що це означає:

Макет Flexbox складається з flex-контейнера, який містить в собі flex-елементи. Flex- контейнер може розташовуватися горизонтально або вертикально. Його ми називаємо основна вісь.

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

Поєднавши кілька flex-контейнерів в різних напрямках, ви можете створити складні макети.

У Flexbox занадто багато властивостей, щоб розбирати їх тут, так що я відправлю вас в унікальне Керівництво по Flexbox і хитрощів CSS, який робить велику роботу по впровадженню всіх властивостей.

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

Ця одна лінія коду робить все наступне:

• Розпізнає .flex-контейнер як flex контейнер.
• Розпізнає всі дочірні записи .flex-контейнера як flex елементи.
• Flex елементи будуть розташовані у вигляді горизонтальної лінії.
• Flex елементи будуть розташовані в первісному порядку.
• Flex елементи будуть розташовані, починаючи з лівого боку flex контейнера.
• Flex елементи матимуть певний розмір в залежності від постійних властивостей ширини.
• Якщо не вистачає місця для всіх flex елементів, вони будуть стискуватися по горизонталі, поки все не помістяться.
• Якщо їм потрібно стискатися, кожен елемент буде скорочуватися в рівній мірі.
• Flex елементи будуть все тягнутися по вертикалі, щоб відповідати висоті найвищого flex елемента.

Правда, це зовсім небагато для одного рядка CSS! Ви можете змінити будь-які з них, але я хотів би дати вам відчути, наскільки потужним може бути Flexbox без додаткової роботи.

Підтримка браузерів: Chrome 21+, Opera 12.1+, Firefox 22+, Safari 6.1+, IE 10+

Flexbox підтримується у всіх сучасних браузерах.

IE10 також підтримує Flexbox, але використовує Tweener специфікації (display: flexbox).

Що станеться зі старими версіями IE?

У мене є деякі припущення.

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

Коли браузери бачать наказ, який вони не розуміють - як display: flex - вони ігнорують його повністю. Це дуже зручно для нас, тому що це означає, що все властивості Flexbox будуть ігноруватися. Flex-контейнер і його елементи повернуться до значення за замовчуванням, також і display: block.

«Витончена» деградація з Modernizr

Якщо браузер не підтримує Flexbox, то буде доданий класс.no-flexbox. Ось простий приклад того, як ваш CSS буде виглядати:

Перевага цього підходу полягає в тому, що ваш запасний код поширюється до класу .no-flexbox. В результаті, коли приходить день, ви зможете відмовитися від підтримки non-Flexbox браузерів, ви можете легко видалити весь код .no-flexbox і ваш сайт просто продовжує працювати так само. І не потрібно ніякого рефакторінга.

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

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.