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

Василий Половнёв

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

Чтобы управлять размерами элементов внутри флекс-контейнера (элемента с 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. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Ваш комментарий		Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

flex-basis

flex-grow

flex-shrink

Что дальше

Комментарии

Ваш комментарий

Недавно всплыло