Как раскладывать ХТМЛ‑элементы на странице. Часть третья: флексбоксы в каталогах и выдаче

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

Чтобы управлять размерами элементов внутри флекс‑контейнера (элемента с display: flex), есть три ЦСС‑свойства: flex-basis, flex-grow и flex-shrink.

flex‑basis

flex-basis определяет начальный размер элемента перед применением к нему flex-grow и flex-shrink. Задаётся в пикселях или процентах.

flex‑grow

flex-grow определяет «жадность» элемента: как сильно он увеличивается за счёт свободного места.

flex-grow: 1
Один элемент займёт всю доступную ширину контейнера.

flex-grow: 1 и flex-grow: 1
Два элемента поделят контейнер пополам.

flex-grow: 2 и flex-grow: 1
Два элемента поделят контейнер в соотношении 2:1.

Считайте, что flex-grow задаёт пропорцию, по которой элементы делят контейнер.

flex‑shrink

flex-shrink определяет «сжимаемость» элемента: как сильно элемент уменьшается, когда в контейнере не хватает места.

Если ширина контейнера 100 пикселей, а в нём два элемента с flex-basis: 75px, то контейнеру не хватит 50 пикселей. Он отнимет недостающие пиксели у флекс‑элементов пропорционально: элементы с flex-shrink: 4 и flex-shrink: 1 получат –40 и –10 пикселей.

Демо основных свойств флекс‑контейнера из статьи Дмитрия Дудина «Что такое флексбокс»

Соберём три этажа портфолио с перебивкой:

<style>
.row {
  /*
  * .row — флекс-контейнер, этаж портфолио.
  */
  display: flex;
  margin-bottom: 20px;
}

.project {
  /*
  * .project — флекс-элемент, карточка проекта.
  * Будет занимать в два раза
  * больше места, чем описание проекта.
  *
  * flex: 2 — краткая запись для
  *   flex-grow: 2;
  *   flex-shrink: 1;
  *   flex-basis: 0;
  */
  flex: 2;
  /*
  * Добавляем внутренний правый отступ.
  */
  padding-right: 10px;
}

.project-caption {
  /*
  * .project-caption — описание проекта.
  */
  flex: 1;
  padding-right: 10px;
}

.project:last-child,
.project-caption:last-child {
  /*
  * У последней подписи или проекта
  * убираем правый отступ.
  */
  padding-right: 0;
}

.spacer {
  /*
  * .spacer — колонка в перебивке.
  * Колонки будут делить этаж поровну.
  */
  flex: 1;
  /*
  * Добавляем внутренние отступы
  * и верхнюю границу.
  */
  padding: 7px 20px 0 0;
  border-top: .5px solid rgba(0, 0, 0, .07);
}
</style>

<div class="row">
  <div class="project">
    <div class="project-image">
      <img src="https://unsplash.it/1000/500"
        width="1000" height="500">
    </div>
  </div>
</div>


<div class="row">
  <div class="project">
    <div class="project-image">
      <img src="https://unsplash.it/600/600"
        width="600" height="600">
    </div>
  </div>
  <div class="project">
    <div class="project-image">
      <img src="https://unsplash.it/650/650"
        width="650" height="650">
    </div>
  </div>
  <div class="project-caption">
    <p>
      Практическое руководство
      для менеджеров и стартаперов
    </p>
  </div>
</div>


<div class="row">
  <div class="project-caption">
    <p>
      Практическое руководство
      для редакторов и разработчиков
    </p>
  </div>
  
  <div class="project">
    <div class="project-image">
      <img src="https://unsplash.it/700/700"
        width="700" height="700">
    </div>
  </div>
  
  <div class="project">
    <div class="project-image">
      <img src="https://unsplash.it/750/750"
        width="750" height="750">
    </div>
  </div>
</div>


<div class="row">
  <div class="spacer">
    <h3>Интерфейс</h3>
    <p>
      Как сайт может повысить доверие
      посетителя к компании?
    </p>
  </div>
  
  <div class="spacer">
    <h3>Дизайн</h3>
    <p>
      Что такое профессиональная этика?
    </p>
  </div>
  
  <div class="spacer">
    <h3>Переговоры</h3>
    <p>
      Как сайт может повысить доверие
      посетителя к компании?
    </p>
  </div>
</div>

В отдельном окне

Что дальше

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

flex‑basis

flex‑grow

flex‑shrink

Что дальше

Рекомендуем другие советы

Свежак

Веб‑разработка

Визуализация

Вдохновение

Текст

Веб‑разработка

Фронтенд и красота

Как сверстать веб‑страницу