Flexbox, или flexible box, — это набор универсальных команд, которые нужны для создания макетов страниц. Это модуль, а не отдельное свойство. Он включает в себя несколько свойств, некоторые из которых предназначены для flex-контейнера, а некоторые — для гибких элементов. Flex-позиционирование помогает контейнеру изменять ширину, высоту и порядок elements. Это нужно, чтобы они соответствовали доступному пространству и поддерживались на всех устройствах с разными размерами экрана. В статье-шпаргалке мы расскажем о работе флексбокса, флекс-контейнере и флекс-элементах, рассмотрим главные и побочные оси, изменение размера вдоль главной оси.
- Как выравнивали элементы до изобретения Flexbox
- Display: flex
- flex-контейнер и flex-элементы
- Список свойств flexbox
- justify-content
- Свойство flex-direction
- Свойство justify-content
- Выравнивание элементов по побочной оси, свойство align-items
- Выравнивание отдельных элементов, свойство align-self
- Размер элементов по главной оси
- Свойство flex-basis
- Что можно использовать вместо flexbox
- Грид-раскладка (CSS Grid Layout)
- inline-block —
- Табличная верстка
- Примеры использования flexbox
Как выравнивали элементы до изобретения Flexbox
CSS Flexbox был создан в 2009 году. Флексбоксы представили как систему макетов, упрощающую создание адаптивных веб-страниц и организацию элементов. Flex разработан для обеспечения более эффективного способа размещения всех частей, выравнивания и распределения пространства между каждым элементом в контейнере. Особенно это нужно, если размеры flex-element неизвестны или динамичны.
Флексбокс упрощает проектирование и создание страниц, устраняет необходимость во множестве свойств float и Position CSS-кода. Он позволяет автоматически изменять высоту и ширину, чтобы заполнить доступное пространство. Можно также сжимать или увеличивать элементы. Flex нужен, чтобы менять порядок составных частей, создавать столбцы одинаковой высоты, делать панели навигации.
HTML появился в начале 1990-х годов. Практическая его реализация заключалась в использовании на экранах. В список входили браузеры и инструменты разработки, а также рабочие веб-сайты.
На этом этапе веб-разработчики сосредоточились на совместном использовании документов. Фокус был на требованиях — заголовки, шрифты и абзацы. В 1993 году было предложено управление макетом с помощью таблиц стилей. Потребовалось некоторое время, чтобы оно стало общепринятым.
В то время структура HTML-документа диктовала макет страницы. О том, что для верстки понадобится нечто большее, чем просто последовательное содержимое, даже не шло речи.
В ранних спецификациях HTML написано: «Элементы внутри BODY расположены в том порядке, в котором должны быть представлены пользователю».
В 1991 году появился ViolaWWW — самый сложный из первых веб-браузеров. Утверждается, что это был первый браузер с поддержкой таблиц стилей, таблиц и вложенных частей HTML. Вслед за этим в 1993 году было предложено использовать «столбцы» в языке представления. Это предложение, однако, не превратилось напрямую в CSS.
В 1997 году HTML 3.2 был выпущен в качестве Рекомендации W3C. В нем говорилось, что таблицы «можно использовать для разметки табличного материала или для других целей макетирования». Многие восприняли это буквально. Таблицы стали основой большинства веб-страниц и считались незаменимыми при структурировании контента. Это было время использования невидимых «гифок» для пробелов и запутанной разметки.
Чуть позже появилось новое свойство CSS — float. Идея float заключалась в том, что элемент удалялся из обычного потока, а затем прижимался к одной из сторон стартового пакета.
Разработчики в начале 2000-х годов придумали создавать многоколоночные макеты. Также со временем стали набирать популярность фреймворки. Bootstrap 3 — пример такого фреймворка, который даже сейчас можно найти на многих веб-сайтах. Его новая версия, Bootstrap 4, больше не использует этот подход. Вместо этого Flexbox применяется для всей системы макетов.
Внедрение в 2012 году display: flex стало прорывом. Это было первое свойство CSS, на 100% разработанное для макетов. Например, если разработчик хочет выровнять несколько элементов в одну строку, display: flex поможет сделать это за пару секунд.
Display: flex
Display: flex и display: inline-flex позиционируют элементы в строках или столбцах. Они распределяют свободное пространство с помощью выравнивания. Во flex расположение элементов аналогично выравниванию и распределению их в графической программе.
Все прямые наследования становятся флексбоксами, которые выравниваются по горизонтальной (строке) и вертикальной (столбцу) осям.
Все прямые потомки container с CSS display:flex становятся flex-элементами и выстраиваются в одну строку. Потомство не обязательно должно быть одного типа. По умолчанию display: flex создает блочный ряд.
Свойства display flex назначаются комплексному контейнеру и распределяют гибкие поля по строкам или столбцам. Поэтому display: flex не формирует сетку макета, как display: grid. Он придает всем флексбоксам в строке одинаковую высоту и избавляет от расчетов расстояния между боксами.
flex-контейнер и flex-элементы
Flex-контейнер — это контейнер, в котором хранятся и работают все гибкие элементы. Например, div, содержащий три других элемента div.
Чтобы сделать родительский div флекс-контейнером, нужно добавить display и присвоить ему значение flex. Это превращает контейнер в блочный элемент, позволяя гибко использовать макет для всех его прямых элементов.
Когда верстальщик создает гибкий контейнер, все его flex-elements по умолчанию будут пытаться уместиться в одну строку. Достигнув максимальной ширины, они автоматически сжимаются, чтобы поместиться в один ряд.
Список свойств flexbox
К основным свойствам флексбокса относятся:
- align-items
- flex-wrap
- justify-content
- align-content
- flex-direction
Свойство flex-direction
Flex-direction сообщает браузерам, в каком направлении расположить прямые дочерние элементы гибкого контейнера. Другими словами, flex-direction определяет главную ось флексбокса.
Картинки на экране рабочего стола можно преобразовать в столбец на смартфоне. Нужно изменить свойство flex-direction —от lines к columns.
Во Flexbox все основано на главной оси. Алгоритм не заботится о вертикали/горизонтали или строках/столбцах. Все правила построены вокруг этой основной оси и побочной, проходящей перпендикулярно.
По умолчанию дочерние элементы будут расположены в соответствии с следующими правилами:
- основная ось — сгруппированы в начале контейнера;
- поперечная ось — вытягиваются, чтобы заполнить весь контейнер.
Свойство justify-content
Можно изменить распределение дочерних частей вдоль главной оси, используя justify-content.
Когда верстальщик работает с первичной осью, он не думает о выравнивании одного дочернего элемента. Нужно заниматься распределением группы.
Можно сгруппировать все elements в определенном месте (для этого используют flex-start, center и flex-end). Есть возможность распределить их отдельно.
Выравнивание элементов по побочной оси, свойство align-items
Для побочной оси используют свойство align-items. Align-items нужно для выравнивания elements или растягивания их по побочной оси.
Flex flow определяет вектор движения flex items, показывает, должны ли они переноситься или нет. Стартовое название — row nowrap. Все входящие элементы находятся по горизонту в строке без переноса.
Выравнивание отдельных элементов, свойство align-self
Разработчик может выровнять каждый элемент отдельно, используя свойство align-self. Оно позволяет переопределить выравнивание, указанное для гибкого контейнера.
Свойство align-self имеет те же значения, что align-items. Первое чаще используется, когда нужно добавить особое выравнивание к отдельному flex items, отличающемуся от других flex items.
Размер элементов по главной оси
Во Flexbox можно управлять отдельными элементами. Например, менять размер, устанавливать порядок расположения.
Свойство flex-basis
Оно определяет длину гибких элементов или отдельных items, предопределяет любую ранее определенную ширину. При этом принимаются значения длины (10%, 4rem). Также для объявленного значения ширины могут использоваться auto.
Flex-basis помогает определить ширину каждого items во flex-контейнере. Когда он достигнет края, части попадут на новую строку. Затем применяется свойство basis и устанавливается 30%. Каждый элемент занимает 30% от общей ширины, оставляя 10%. Также удобно использовать свойство flex-grow. Оно помогает составным частям увеличиваться и закрывать небольшие пространства, которые не могут принять новые items.
Свойство flex-grow
Оно показывает, может ли element увеличиваться в размере. Это гарантирует, что все items заполнят открытое место внутри container. Элемент будет меняться в соответствии с предоставленным значением. Flex-grow по умолчанию имеет значение 0 и принимает безразмерное значение (1, 2, 3…)
Свойство flex-shrink
Shrink определяет, как будет сжиматься каждый element, если недостаточно места. Он также имеет значение по умолчанию 1 и принимает безразмерное значение.
Если при установке определенной ширины сумма ширины плюс зазор превышает ширину container, можно использовать flex-shrink. Это нужно, чтобы указать, насколько будет уменьшена каждая составляющая.
Многострочный флекс-контейнер, свойство flex-wrap
Flex-wrap указывает, должен ли браузер переносить переполненные элементы в несколько строк. Свойство принимает следующие значения:
- nowrap
- wrap
- wrap-reverse
Большую часть времени нужно использовать CSS Grid, но Flexbox + flex-wrap определенно полезны. Благодаря flex-wrap:wrap не остается единственной линии первичной оси, которая могла бы перекосить каждый элемент. По сути, каждая строка действует как отдельный мини-контейнер.
Что можно использовать вместо Flexbox
Отметим другие инструменты, которые помогут сделать процесс верстки более удобным.
Грид-раскладка (CSS Grid Layout)
Есть две системы макетов CSS, с которыми можно работать: Flexbox и CSS Grid. CSS Grid — это двухмерная система макетов, где доступна верстка со строками и столбцами вместе. Она открывает множество различных возможностей для создания более сложных и организованных систем.
Когда Flexbox был выпущен впервые, многие думали, что он может быть лучшей системой макетирования для создания веб-страниц. На деле, Flexbox помог верстальщикам делать более гибкие и удобные в обслуживании веб-приложения, но основная идея одномерной системы макетов не имеет смысла, когда нужно создать более сложный дизайн макета.
Флексбокс подходит для небольших макетов с несколькими строками или столбцами. Также он используется для выравнивания элементов и content-first design. Гриды нужны для реализации сложного дизайна, работы с зазорами между элементами блока, перекрывания items и layout-first design. Когда уже есть структура дизайна макета, его легче построить с помощью CSS Grid. В этом помогает двухмерная система макета: можно использовать line и column вместе, а также позиционировать их.
inline-block
Inline-flex позволяет браузерам отображать выбранный элемент HTML как гибкую блочную модель встроенного уровня.
Установка для свойства display значения inline-flex превращает блочную модель в flexbox встроенного уровня. Display: inline-block позволяет устанавливать ширину и высоту элемента. Верхние и нижние поля/отступы при этом учитываются, а при display: inline — нет.
Display:inline-block не добавляет перенос строки после элемента, поэтому может располагаться рядом с другими.
Табличная верстка
Свойство table-layout определяет алгоритм, используемый для расположения ячеек, строк и столбцов таблицы.
Основное преимущество табличной верстки — в том, что таблица отображается намного быстрее. В больших таблицах пользователи не увидят ни одной части таблицы, пока браузер не отобразит ее всю. Пользователи будут видеть верхнюю часть таблицы, в то время как браузер загружает и отображает остальную часть таблицы. Так создается впечатление, что страница загружается быстрее.
При fixed table ширина столбцов изначально определяется шириной первой строки ячеек в теле таблицы. Любая ширина столбцов, указанная в CSS, затем фиксируется.
Браузер сначала отображает всю таблицу, а потом ее содержимое. Это позволяет заранее узнать окончательный макет и ширину. Fixed table layout обеспечивает контроль над дизайном таблицы с точностью до пикселя. При этом в жертву приносится гибкость для изменения длины контента.
Примеры использования flexbox
Пример 1:
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh
}
Пример 2:
.inner-wrapper {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
}