Реагуючі блоки однакової висоти на основі Flexbox з JavaScript Fallback

3 хв. читання

Чому саме Flexbox? Тому що цей модуль був розроблений для того, щоб вирішити проблеми даного типу. Це гнучкий і ефективний спосіб управління для всіх видів макетів. Цей спосіб не створює майже ніякого часового розриву між правильним та неправильним виглядом макета. В випадку JavaScript рішення потрібен час, щоб скачати документ, а потім завантажити відповідний JS файл і, якщо такий є, завантажити зображення в блок. Flexbox миттєвий і JavaScript займає всього кілька секунд. Цей спосіб з JavaScript ідеально підходить для людей, які використовують старі браузери, які не підтримують Flexbox.

Проблема

Код і проблема (макет з ламаною лінією) для вирішення:

.list
{
    overflow: hidden; /* just clearing floats */
}
    .list__item
    {
        width: 25%; /* 4 items per row */
        float: left;
    }

Flex-box

Вирішення:

Якщо ви ще не працювали з Flexbox, ви будете приємно здивовані. display: flex ініціює Flexbox для елемента контейнера, flex-wrap: wrap обгортання каже обернути дочірні елементи, а не розміщати їх на одній лінії. Повторюючи display: flex для дочірніх елементів, гарантується, що елементи мають однакову висоту у своїх рядках.

Flex-box

Це прекрасно працює в останніх версіях 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-залежного коду, який:

  1. Виявляє, якщо браузер не підтримує Flexbox;

  2. Розраховує кількість елементів в рядку, розділивши ширину.list і ..list__item;

  3. Віртуально ділить список в рядках відповідно до цього числа;

  4. Виявляє, який елемент має найбільшу висоту в кожному рядку;

  5. Встановлює цю висоту для інших елементів в кожному рядку відповідно.

Що робити, если JavaScript відключеній в браузері? Проблема в тому, що нативна функція виявлення CSS є менш підтримуваною, ніж сама Flexbox. Тому, використовуючи @support неможливо охопити кожен браузер, який підтримує Flexbox. Але це краще, ніж нічого.

Як можна вирішити цю проблему: "вимкнений JavaScript = немає підтримки Flexbox( скоріше всього - самий вірний спосіб)" і і виправити винятки з допомогою @support. Можна додати ім'я класу .no-JS до <HTML> тега і видалити його за допомогою JavaScript. Так ми будемо знати відключений він чи ні. Тоді, стилюйте елементи списку і, нарешті, "компенсуйте" це стилювання за допомогою @support.

Блоки відображаються, як рядки в повну ширину в цьому випадку. Якщо є будь-які зображення, вони будуть вирівняні по правому краю рядка на великих екранах.

Flex-box

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: flexbox html, flex box, css display flex