CSS: Сетка с колонками одинаковой высоты на FlexBox
В сегодняднем уроке мы поговорим о создании сетки с колонками одинаковой высоты в независимости от заполненности онных различным колличеством содержимого. Честно признаюсь это моя самая больная тема, и как перфекциониста она мне просто не даёт спокойно спать по ночам.
Как вы знаете существует много решений подобной задачи, от подгонки контента под определённые параметры длинны, до програмного огрничения символов или подрезки всего, что выходит за грани заданного блока как в ютюбе например. Мне если честно ни один из них не по душе.
Вибирая в качестве иструмента для построения сетки флекс бокс, нам не нужно будет идти на подобные компромисы. FlexBox позволяет сделать гибкую сетку которая сама будет подстраиватся под наше содержимое. Контейнеры Flex вычисляют пространство, доступное внутри сетки, что дает нам большую гибкость с контентом, позволяя сделать, что то похожее на это:
Как это работает?
Я создал контейнер ul с кучей элементов li внутри. Каждый элемент списка содержит некоторые элементы контента, такие как , , и
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. LinkTitle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. LinkTitle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Link
Всё, что необходимо для создания контейнера flexbox, это display: flex; Я добавил display: flex; На родительский элемент ul (.list), чтобы управлять его дочерними элементами (.list-items).
.list
Теперь давайте добавим некоторые медиа-запросы. Мой макет будет начинаться с одной колонки на строку, пока размер экрана не достигнет 40em. Затем разместим по два элемента на строку до тех пор, пока размер экрана не достигнет 60em, затем макет переключится на три колонки в строке.
@media all and (min-width: 40em) < .list-item < width: 50%; >> @media all and (min-width: 60em) < .list-item < width: 33.33%; >>Я добавил display: flex; К элементам списка, чтобы каждый элемент li растягивался по вертикали. По умолчанию Flex растягивает элементы по вертикали, поэтому колонки могут быть одинаковыми по высоте. Теперь это дает возможность управлять дочерними элементами, позволяя мне закрепить ссылки в нижней части каждого сообщения.
.list-item
Ну и наконец display:flex; Применяем к .list-content, чтобы я мог стилизовать
внутри него. Поскольку элементы flex размещаются в строке по умолчанию, я указал направление, которое должно быть столбцом.
.list-content < display: flex; flex-direction: column; background-color: #fff; padding: 1em; width: 100%; >.list-content p
CSS: Как сделать блоки одинаковыми по высоте Flexbox
Очень часто делая раскладку материалов на сайте можно столкнуться с весьма неприятной ситуацией, когда например у товаров а магазине или у записей в блоге могут прилично разниться длина заголовков, описания итд. Всё это ломает сетку в случае если у вас более одного элемента в строке.
CSS к сожалению ранее не умел связывать соседние элементы в строке для приведения их высоты к общему знаменателю. К счастью с внедрением спецификации FlexBox всё радикально изменилось, теперь задавая родительскому элементу display:flexbox вы получаете массив элементов внутри тесно взаимосвязанный между собой.
Рассмотрим ситуацию, предположем у нас есть некий блок в котором мы выводим по три записи на строку:
Что бы в независимости от длины содержимого все блоки стали одинаковой высоты в каждой из строк, делаем вот такой трюк:
.wrapper < display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; >.item
И на последок если вы используете внутри .item внутренний враппер/.inner (обёртку) и хотите его тоже прибить к низу item вам просто необходимо задать этому элементу высоту 100% и он заполнит родительский блок. Пример
Добавляем высоту иннеру:
.wrapper < display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; >.item < display: -webkit-flex; display: -ms-flexbox; display: flex; >.inner
Колонки одинаковой высоты на JQuery
Задача: Есть, допустим, несколько блоков div, которым надо сделать одинаковую высоту, независимо от содержимого.
Решение: В интернете много всяких решений. Но мне понравилось одно на JQuery. Делается просто и со вкусом. Итак, кодим. Для начала создаем структуру:
1
1
1
1
1
1
1
1
Класс column обязателен, добавим немного стилей:
.column < width : 20%; float : left >.first < background : red >.second
Что тут и как работает?
А просто вызывается функция equalHeight, которая сравнивает высоту блоков, и задает всем блокам, имеющим класс column, одинаковую высоту через инлайн-стили. Все просто.
Обновление
За окном шел 2019 год, и решение немного устарело. Для более современного решения используем скрипт matchHeight.
Колонки одинаковой высоты на CSS Flex
Если вы верстаете сайты только под современные браузеры, то вам еще лучше. Вы можете отказаться от использования Javascript в сторону использования CSS Flexbox или CSS Grid.
.list < display : flex; flex-wrap : wrap; >.list__item
Павел Сайк
12 лет назад
Комментарии 10
Добавить комментарий ×
А почему бы не использовать флекс?
7 лет назад статья была написанна была, тогда флекс был только в разработке
Подскажите пожалуйста кто сталкивался с такой проблемой:
скрипт EqualHeights работает на всех экранах при любых условиях — но есть одно НО
При загрузке страницы с длинным контентом, часть контента выходит (вылезает, не помещается) за границы одного из блоков.
Причем есть странность — если бы код совсем не сработал — блоки были бы просто разной высоты.
А получается, что блоки одинаковой высоты, и не вмещаются всего пара предложений.
Но после обновления страницы f5 «глюк» уходит.
Этот «глюк» появляется периодически, но не систематически. Либо систематику я вывить не смог
Дмитрий, скрипт уже устаревший. Попробуйте вот этот github.com/liabru/jquery-match-height. Мы его используем в работе
Как сделать блоки одной высоты на flexbox?
Как сделать чтобы при помощи flexbox блоки были одной высоты вне зависимости от количества контента в них?
- Вопрос задан более трёх лет назад
- 21004 просмотра
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Достаточно родителю задать display: flex.
Дочерние по умолчанию растянутся на всю высоту.
Решения вопроса 1
profesor08 @profesor08 Куратор тега CSS
align-items: stretch делает блоки одинаковой высоты. И надо учесть, это не распространяется на их содержимое.
Ответ написан более трёх лет назад
Нравится 3 4 комментария
не работает что-то.
profesor08 @profesor08 Куратор тега CSS
profesor08, не работает https://stackblitz.com/edit/angular-ivy-vjjwbp?fil.
profesor08 @profesor08 Куратор тега CSS
stepa90, ну ты хотя бы почитай что значит это свойство, и что оно делает. В твоем случае оно вообще никак тебе не поможет, так как тебе надо задать высоту для контейнера, и сделать чтоб блоки поровну делили пространство flex: 1 1 0;