Флексбокс, часть 2 / Флекс-элементы и блочная модель [1/28]
×

Флекс-элементы и блочная модель [1/28]

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

Начнём с простого вопроса. Как работает привычная нам блочная модель внутри флекс-контейнера? Есть ли какие-нибудь отличия в поведении привычных свойств?

Ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно: общий размер элементов складывается из этих компонентов. Это поведение так же можно менять с помощью свойства box-sizing.

Есть и несколько важных отличий:

  • флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;
  • на флекс-элементы не действует свойство float.

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


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Флекс-элементы и блочная модель</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="world"> <div class="spot"> <div class="skate skate-1 racoon-green"></div> <div class="skate skate-2 racoon-brown"></div> <div class="skate skate-3 racoon-orange"></div> </div> </body> </html>
.spot { display: flex; justify-content: space-around; align-items: center; } .skate { min-width: 40px; min-height: 120px; background-clip: content-box; border-top-left-radius: 75% 25%; border-top-right-radius: 75% 25%; border-bottom-left-radius: 75% 25%; border-bottom-right-radius: 75% 25%; border-color: white; } .skate::after { left: 50%; margin-left: -10px; } .skate-2 { }
HTML Academy
  1. Задайте всем лонгбордам .skate, на которых сидят еноты, ширину 75px и высоту 300px (минимальные размеры изменять не нужно),
  2. внутренние отступы со всех сторон 10px.
  3. Затем второму скейту задайте box-sizing: border-box.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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