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

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


В прошлый раз я рассказывал о раскладке флоатами и позиционированием. На смену этим методам пришли флексбоксы.

Флексбоксы — набор ЦСС-свойств для гибкой раскладки элементов. Это инструмент для раскладки и выравнивания элементов, более управляемый, чем флоаты и таблицы.

Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс-контейнером, а все вложенные в него элементы станут флекс-элементами.

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

ЦСС-свойства флекс-контейнера управляют направлением (flex-direction), расположением (justify-content) и переносом (flex-wrap) вложенных элементов.

О раскладке ХТМЛ-элементов, позиционировании и боксах

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

Таким образом можно любую сложную модульную вёрстку разбить на вложенные друг в друга флекс-контейнеры с собственным ритмом элементов.

 

Соберём четырёхколоночную сетку из «Типографики и вёрстки»:

<style>
.row {
  /*
  * .row — флекс-контейнер, этаж сетки.
  */
  display: flex;
  /*
  * Флекс-элементы будут раскладываться
  * слева направо.
  */
  flex-direction: row;
  /*
  * Прижимаем флекс-элементы к левому краю.
  */
  justify-content: flex-start;
  /*
  * Если места для элементов не хватает,
  * запрещаем их перенос на следующую строку.
  */
  flex-wrap: nowrap;
}

/*
* Флекс-элементы на одну, две, три
* и четыре колонки.
*/
.col-1,
.col-2,
.col-3,
.col-4 {
  /*
  * flex-grow определяет насколько элемент
  * будет больше своих соседей.
  * Элемент с flex-grow: 1 займёт
  * всю ширину контейнера,
  * два элемента с flex-grow: 1 поделят
  * контейнера пополам.
  *
  * flex-grow: 0 не даёт элементу
  * растягиваться больше указанного размера.
  */
  flex-grow: 0;
  /*
  * flex-shrink определяет насколько сильно
  * элемент будет уменьшатся, если
  * во флекс-контейнере не хватит места.
  */
  flex-shrink: 0;

  /*
  * Задаём колонкам внутренние отступы
  * по умолчанию.
  */
  box-sizing: border-box;
  padding-right: 20px;
}

.col-1 {
  /*
  * flex-basis задаёт начальный размер
  * элемента до того, как он начнёт тянуться
  * в соответствии с flex-grow.
  */
  flex-basis: 25%;
  max-width: 25%;
}

.col-2 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-3 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-4 {
  flex-basis: 100%;
  max-width: 100%;
}
</style>

<div class="row">
  <div class="col-4">
    <!-- Колонка на всю ширину страницы -->
  </div>
</div>

<div class="row">
  <div class="col-3">
    <!-- Колонка на три четверти страницы -->
  </div>
  <div class="col-1">
    <!-- Колонка на четверть страницы -->
  </div>
</div>

<div class="row">
  <div class="col-1">
    <!-- Колонка на четверть страницы -->
  </div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
</div>

Свойства flex-grow, flex-shrink, flex-basis и order управляют размерами и порядком отображения флекс-элементов. В следующем совете я расскажу о них и о том, как они помогают с вёрсткой каталогов и выдачи.

Что дальше

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

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

Комментарии

Антон Лях
21 марта 2018

Хорошая заметка на Хабре о тонкостях работы со флексбоксами.
https://habrahabr.ru/post/329820/


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

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

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

Вот такой веб 2.0.

Как бороться с багами? Часть шестая: изолировать 4 Как бороться с багами? Часть пятая: повторить Почему вы используете jQuery для хождения по дереву и управления событиями? 2




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

2 4 3 2