Практическое задание по Flexbox

Free Preview
Продолжительность: 9 мин

В данном уроке применим flexbox на практике.

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

Описание блока и требования к верстке

Блок представляет собой секцию, внутри которой располагается несколько карточек. Каждая карточка содержит:

  • изображение (иконка или фотография);
  • заголовок фичи;
  • короткое текстовое описание.

Основные требования к верстке:

  1. Контейнер с карточками должен быть flex-контейнером.
  2. Карточки должны располагаться в одну строку на широких экранах.
  3. При уменьшении ширины экрана карточки должны переноситься на новую строку.
  4. Расстояние между карточками должно быть одинаковым.
  5. Все карточки должны иметь одинаковую высоту, независимо от количества текста внутри.
  6. Содержимое карточки (картинка, заголовок, текст) должно быть аккуратно выровнено.

Базовая структура HTML и подсказки

Вы можете использовать следующую структуру разметки:

<section class="features">
  <div class="list">
    <div class="feature">
      <img src="image.jpg" alt="Описание фичи">
      <h3>Белые ночи</h3>
      <p>Уникальное природное явление, когда ночь почти не наступает.</p>
    </div>

    <div class="feature">
      <img src="image.jpg" alt="Описание фичи">
      <h3>Разводные мосты</h3>
      <p>Одна из самых узнаваемых достопримечательностей города.</p>
    </div>

    <div class="feature">
      <img src="image.jpg" alt="Описание фичи">
      <h3>Эрмитаж</h3>
      <p>Один из крупнейших художественных музеев в мире.</p>
    </div>
  </div>
</section>

html

Вы можете добавить больше карточек при необходимости. Вспомните свойства display: flex, flex-wrap, justify-content и align-items, для управления размерами карточек могут пригодиться свойства flex-grow и flex-basis. Для выравнивания содержимого внутри карточки можно сделать саму карточку flex-контейнером.

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

Предыдущий урокСледующий урок