Флексбокс, часть 1 / Флексбокс, display: flex [1/31]
×

Флексбокс, display: flex [1/31]

Флексбокс — это первый CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.

Другие механизмы, с помощью которых мы раньше строили сетки, задумывались совсем не для этого: плавающие блоки нужны для создания блоков, которые обтекает текст, а таблицы используются для разметки табличных данных.

Флексбокс задумывался для создания «гибких» раскладок и хранит много тонкостей и чудес, о которых мы поговорим в этой серии курсов. А пока начнём с простого. Как включить флексбокс?

Очень просто: нужно задать элементу свойство display: flex;. После этого происходит два события:

  1. Элемент с display: flex; превращается во «флекс-контейнер» и внутри него начинает происходить вся магия гибкой раскладки.
  2. Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают играть по новым правилам.

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

Поэкспериментируем!

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

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Флексбокс, display: flex</title> <base href="/assets/course96/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug keks"></div> </div> </body> </html>
.room { }
HTML Academy
  1. Блоку .room задайте свойство display со значением flex.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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