x
 
↑
Сентябрь
•
3 •
1 •

•

3 •
↓
Василий
28 сентября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

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

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

Поделиться
Отправить

Комментарии
Дима Шишкин
28 сентября 2017

У картинок нужно указывать атрибут alt. Хотя бы пустой. Если его не указать, то скринридеры будут считывать то, что записано в src.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Как написать аккуратный код? Часть четвёртая: ответственность Расскажите, как автор советов работает с маргиналиями? Отслеживаете ли вы производительность программистов? Как и когда зарождающийся стартап в процессе своего развития должен подходить к вопросу имплементации билинга?




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

Работаю корректором и иногда хочется влезть не в своё дело 1 • Как выжить в дистанционной работе. Исполнитель понимает задачу 2 • Висячие предлоги в английском 1 • Что такое профессиональная этика? 6 •