Чому саме Flexbox? Тому що цей модуль був розроблений для того, щоб вирішити проблеми даного типу. Це гнучкий і ефективний спосіб управління для всіх видів макетів. Цей спосіб не створює майже ніякого часового розриву між правильним та неправильним виглядом макета. В випадку JavaScript рішення потрібен час, щоб скачати документ, а потім завантажити відповідний JS файл і, якщо такий є, завантажити зображення в блок. Flexbox миттєвий і JavaScript займає всього кілька секунд. Цей спосіб з JavaScript ідеально підходить для людей, які використовують старі браузери, які не підтримують Flexbox.
Проблема
Код і проблема (макет з ламаною лінією) для вирішення:
.list
{
overflow: hidden; /* just clearing floats */
}
.list__item
{
width: 25%; /* 4 items per row */
float: left;
}
Вирішення:
Якщо ви ще не працювали з Flexbox, ви будете приємно здивовані. display: flex ініціює Flexbox для елемента контейнера, flex-wrap: wrap обгортання каже обернути дочірні елементи, а не розміщати їх на одній лінії. Повторюючи display: flex для дочірніх елементів, гарантується, що елементи мають однакову висоту у своїх рядках.
Це прекрасно працює в останніх версіях Chrome, Android, Safari, Opera, Firefox, і Internet Explorer 10 +. Для решти є "таблетка" JavaScript.
Я не включив це в попередньому коді CSS, але деякі з старих WebKit браузерів підтримують старий синтаксис Flexbox (display: -webkit-box). Тим не менш, обгортка -webkit-box-lines: multiple не працює на IOS Safari 6.1- та Android 4.3-.
JavaScript Fallback
Ця частина охоплює запасне рішення для таких браузерів, як Internet Explorer 9-, Android 4.3-, IOS Safari 6.1-, і Opera Mini. Я написав невеликий шматочок JQuery-залежного коду, який:
-
Виявляє, якщо браузер не підтримує Flexbox;
-
Розраховує кількість елементів в рядку, розділивши ширину.list і ..list__item;
-
Віртуально ділить список в рядках відповідно до цього числа;
-
Виявляє, який елемент має найбільшу висоту в кожному рядку;
-
Встановлює цю висоту для інших елементів в кожному рядку відповідно.
Що робити, если JavaScript відключеній в браузері? Проблема в тому, що нативна функція виявлення CSS є менш підтримуваною, ніж сама Flexbox. Тому, використовуючи @support неможливо охопити кожен браузер, який підтримує Flexbox. Але це краще, ніж нічого.
Як можна вирішити цю проблему: "вимкнений JavaScript = немає підтримки Flexbox( скоріше всього - самий вірний спосіб)" і і виправити винятки з допомогою @support. Можна додати ім'я класу .no-JS до <HTML> тега і видалити його за допомогою JavaScript. Так ми будемо знати відключений він чи ні. Тоді, стилюйте елементи списку і, нарешті, "компенсуйте" це стилювання за допомогою @support.
Блоки відображаються, як рядки в повну ширину в цьому випадку. Якщо є будь-які зображення, вони будуть вирівняні по правому краю рядка на великих екранах.
Ще немає коментарів