Флексбокс, часть 1 / Блоки одинаковой высоты [30/31]
×

Блоки одинаковой высоты [30/31]

Ещё одна часто встречающаяся задача — реализовать раскладку с блоками одинаковой высоты.

Надо учитывать, что содержимое блоков может быть разным и их высота может меняться.

В обычной блочной модели есть фундаментальный недостаток — соседние блоки ничего не знают друг о друге, поэтому их высоты нельзя «связать». Получается, что все «стандартные» варианты для решения этой задачи не работают:

  • float или inline-block не могут «связывать» высоты соседних блоков;

  • таблицы и CSS-таблицы позволяют делать ячейки одинаковой высоты, но появляются ограничения, связанные с расположением элементов в строках;

  • минимальная высота не подходит, так как какой-то из блоков всегда может стать выше остальных;

  • конечно, можно задать всем блокам фиксированную высоту, но это решение совсем не универсальное.

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

Попробуем починить раскладку на float с помощью флексбокса.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Блоки одинаковой высоты</title> <base href="/assets/course96/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="subtle"> <article class="todos"> <h1>Список дел Кексика</h1> <div class="columns"> <section> <h2>Дело №1</h2> <p>Проснуться, сделать зарядку.</p> </section> <section> <h2>Дело №2</h2> <p>Совершить экспедицию на кухню, полакомиться рыбкой и икрой из холодильника.</p> </section> <section> <h2>Дело №3</h2> <p>Передохнуть от тяжких трудов, поспать.</p> </section> <section> <h2>Дело №4</h2> <p>Навести беспорядок, покусать человека за пятки, сбросить с полки цветочный горшок.</p> </section> <section> <h2>Дело №5</h2> <p>Выкрасть сметану из холодильника.</p> </section> <section> <h2>Дело №6</h2> <p>Выяснить отношения с соседским котом.</p> </section> </div> </article> </body> </html>
.columns { } .columns section { float: left; width: 140px; }
HTML Academy
  1. Блоку .columns задайте раскладку флексбокса
  2. и перенос флекс-элементов на новую строку.
Теория Проверить Следующее задание

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.