logo

Flexbox колонки одинаковой высоты

7 декабря 2019 в 16:40 CSS,Javascript (JS)
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
НЕТ ВРЕМЕНИ ЧИТАТЬ СТАТЬЮ?
Но вам требуется помощь в настройке Flexbox колонки одинаковой высоты ? Получите индивидуальную мини-консультацию по Скайпу или WhatsApp.

Цена: 500 руб.Оформить заказ и оплатить

Если вы собираетесь делать все самостоятельно — продолжайте чтение!

В основе мы будем использовать Flexbox в качестве основного варианта, и JS в качестве запасного варианта.

Почему Flexbox?

Flexbox Layout модуль был разработан для решения проблем колонок одинаковой высоты. Это эффективный и гибкий способ управления, всеми видами макетов.

Высота колонок выстраивается моментально, и не требует почти никакого промежутка времени для сработки. В случае решения JavaScript требуется время, чтобы загрузить документ, а затем загрузить соответствующий файл JS, и, если таковые имеются, загружать изображения в блоках.

Flexbox мгновенно и JavaScript занимает всего несколько секунд. Тем не менее, этот случай JavaScript идеально подходит для людей, которые используют старые версии браузеров, которые не поддерживают Flexbox.

Здесь описано, какие браузеры поддерживают flexbox — https://caniuse.com/#search=flex или смотрите фото ниже.

2016-05-11_114403

Поддержка браузерами Flexbox

Проблемный вариант

[php]
<ul class=»list»>
<li class=»list__item»><!— content —></li>
<li class=»list__item»><!— content —></li>
<!— other items —>
</ul>
[/php]

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

flexbox-based-responsive-equal-height-blocks-with-javascript-fallback-1

Решение

Если вы не имели дело с с Flexbox, вы будете удивлены, как это работает. Дисплей: Flex инициирует Flexbox для элемента контейнера и биоэтанол оберткой: обертка говорит, чтобы обернуть дочерние элементы, а не подогнать их на одну строку. Повторяя дисплей: Flex для дочерних элементов гарантирует, что элементы имеют одинаковую высоту в своих рядах.

[php]
.list
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list__item
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
[/php]

flexbox-based-responsive-equal-height-blocks-with-javascript-fallback-2

Это отлично работает в последних версиях Chrome, Android, Safari, Opera, Firefox и Internet Explorer 10+. Для остальных у меня есть таблетки JavaScript.

Я не включил это в предыдущем коде CSS, но некоторые из старых браузеров WebKit поддерживает старый синтаксис Flexbox ( дисплей: -webkit-бокс ). Тем не менее, обертка собственность -webkit-box-линии: несколько просто не работает на ОС IOS Safari 6.1- ни на Android 4.3-.

JavaScript запасной вариант

Эта часть охватывает замещающее решение для таких браузеров , как Internet Explorer, 9- Android 4.3-, 6.1- ОС IOS Safari и Opera Mini. Я написал небольшой кусочек JQuery кода зависящему , который:

1. Обнаруживает, если браузер не поддерживает Flexbox;
2. Рассчитывает количество элементов в строке путем деления ширины .list и .list__item ;
3. Практически делит список на строки соответственно к этому числу;
4. Обнаруживает, какой элемент имеет самый большой высоты в каждой строке;
5. Устанавливает эти высоты для других элементов в каждой строке соответственно.

Что делать , если JavaScript отключен в браузере? Проблема заключается в том, что нативный функция обнаружения CSS является менее поддерживается , чем сама Flexbox. Поэтому, используя @support правило не распространяется на каждый браузер , который поддерживает Flexbox. Но это лучше , чем ничего.

То , что я предлагаю , чтобы относиться к вещам так: отключен JavaScript = нет Flexbox поддержки (я считаю , что это равенство в основном правильно) и исправить исключения с помощью @support . Технически, добавить имя класса .no-JS к тег и удалите его с помощью JavaScript. Вот как мы будем знать , если он отключен или нет. Затем стиль элементы списка , соответственно , и , наконец , «компенсировать» этот стиль с помощью @supports.

Я решил представить блоки как полную ширину строк в этом случае. Если есть какие-либо изображения, они будут выровнены по правому краю строки на больших экранах.

[php]
<html class=»no-js»>
<head>
<!— your stuff —>
<script>(function(e,t,n){var r=e.querySelectorAll(«html»)[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,»$1$2″)})(document,window,0);</script><!— remove this if you are using Modernizr —>
</head>
<!— your stuff —>
</html>
[/php]

[php]
html.no-js .list__item
{
width: 100%;
float: none;
}
html.no-js .list__item img
{
max-width: 9.375rem; /* 150 */
float: right;
margin-left: 1.25rem; /* 20 */
}

@supports ( display: -webkit-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 25%;
float: left;
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
[/php]

responsive-equal-height-blocks-5

Похожие статьи

Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает.

Контактный номер телефона: *

Введите контактный E-mail: *

Как с вами связаться? *


Остальные поля не обязательные, но помогут нам лучше понять суть вашего бизнеса и сделать предложение эффективней.

Заполнить все поля
Какие услуги вас интересуют?

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ?

Сколько заявок в месяц вам необходимо получать?

Средний чек за продажу товара/услуги ?

Вкратце опишите свою деятельность и причину обращения:

Представьтесь, пожалуйста:

Бюджет на реализацию

Запрос демо версии
Дорогой клиент, демо версию мы можем бесплатно реализовать для вас в течении 1-2 дней. Уточните детали вашего бизнеса.

Пришлите 1-5 ссылок на сайты вашей тематики которые вам нравятся. Так же можете приложить ссылки на фото(скрншоты)

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Добавить комментарий, если необходимо



Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает.

Контактный номер телефона: *

Введите контактный E-mail: *

Как с вами связаться? *


Остальные поля не обязательные, но помогут нам лучше понять суть вашего бизнеса и сделать предложение эффективней.

Заполнить все поля
Какие услуги вас интересуют?

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ?

Сколько заявок в месяц вам необходимо получать?

Средний чек за продажу товара/услуги ?

Вкратце опишите свою деятельность и причину обращения:

Представьтесь, пожалуйста:

Бюджет на реализацию

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Запись на бесплатный урок
Введите ваше имя, телефон и e-mail.
Я свяжусь с Вами для уточнения времени прохождения урока.

Как вас зовут *

Как с вами связаться? *

Введите контактный телефон *

Введите контактный E-mail *



[contact-form-7 404 "Not Found"]
Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течение 10 минут, для обсуждения деталей.


Ваш email

Введите контактный телефон

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

Введите ваше имя *

Введите контактный email *

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течение 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

Введите ваше имя *

Введите контактный E-mail *

[contact-form-7 404 "Not Found"]
Заказать обратный звонок
Я свяжусь с Вами в течение 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *



Степень загрузки
В данном разделе представлена моя занятость в данный момент. Данные обновляются каждый день. Вся работа выполняется по предварительной записи и 20% предоплатой от стоимости проекта.
низкая загрузка. выполняется ~5 заказов. старт работ через 5 дней.
средняя загрузка. выполняется ~15 заказов. старт работ через 20 дней.
высокая загрузка. заказы временно не принимаются.
Задать вопрос
У вас есть вопросы адресованный интернет-маркетологу? А у меня ответы, добро пожаловать! И да, это бесплатно. Я отвечу вам в течение 24 в разделе вопрос-ответ.
[contact-form-7 404 "Not Found"]