По мере развития веб-дизайна появились различные стандартные способы размещения элементов на веб-сайте. CSS flexbox – это относительно новый, но мощный способ создания макетов, с которым должен быть знаком каждый веб-разработчик и дизайнер.
Если вы еще не знаете, как его использовать, это подробное руководство по flexbox направлено на то, чтобы изменить это. В следующем посте мы поговорим о том, что такое flexbox, почему он имеет значение и его основополагающая концепция. После этого мы подробно рассмотрим свойства и значения CSS, связанные с flexbox, и закончим примером варианта использования.
Хорошо, нам нужно многое обсудить, и это будет немного технически, так что наденьте свои CSS-очки и давайте двигаться дальше.
Что такое CSS Flexbox?
Flexbox расшифровывается как гибкая коробка. Это модуль макета для CSS, предназначенный для предоставления вам эффективного способа упорядочивания, организации и изменения размера элементов веб-сайта для создания высокоадаптивных дизайнов.
Конечно, технология размещения веб-компонентов на странице не является новой. С самого начала интернета веб-дизайнеры использовали различные способы размещения изображений, текста и другого контента там, где они хотели его видеть. Однако они либо не подходили для адаптивного дизайна (таблицы), либо вообще никогда не использовались в качестве инструмента компоновки (float), либо не позволяли определять равные высоты для элементов (inline-block) или имели другие проблемы.
Таким образом, в то время как дизайнеры и разработчики делали это в течение длительного времени, все еще существовала куча шаблонов проектирования, которые были либо невозможны, либо нуждались в JavaScript для работы. Распространенными примерами являются вертикальное центрирование и равные колонны, два Святых Грааля веб-дизайна.
Чем отличается Flexbox?
Способ работы flexbox довольно прост на поверхности: у вас есть контейнер (flex container) с дочерними элементами (любые элементы, содержащиеся внутри, называются flex items), которые размещаются вдоль линий flex.
Линиями и элементами можно управлять по расположению, размеру, расстоянию, как по вертикальной, так и по горизонтальной оси с помощью множества операторов. Это позволяет наилучшим образом использовать имеющееся пространство и позволяет элементам автоматически располагаться в соответствии с ним.
Основополагающая концепция
Как уже упоминалось, flexbox – это целый CSS-модуль, а не одно свойство. Поэтому он поставляется с целым рядом собственных операторов, некоторые для родительского контейнера, некоторые для его дочерних элементов.
Чтобы понять, как они работают, важно знать концепции и терминологию flexbox, которые указаны ниже:
main axis – это ось, по которой выкладываются элементы. Важно: он может быть как вертикальным, так и горизонтальным, в зависимости от свойства flex-direction.
main-start, main-end – Это начальная и конечная точка расположения элементов.
main size – это означает либо ширину, либо высоту гибких элементов, в зависимости от направления главной оси.
cross axis – ось, перпендикулярная главной оси. Его направление тоже зависит от того, как определена главная ось.
cross-start, cross-end – начало и направление, в котором будут заполнены гибкие линии.
cross-size обозначает другой размер гибких элементов, который не определяется основным размером.
writing-mode – позволяет переключать направление письма слева направо, справа налево или даже по вертикали. Это незавершенная работа с практически полной поддержкой браузера, однако важно знать некоторые из свойств, описанных ниже.
Как вы можете видеть, многое в flexbox довольно абстрактно и не совсем определено. Следовательно, большая часть нижеприведенного CSS зависит от вашей настройки.
Когда использовать Flexbox
Хоть вы и можете использовать flexbox для создания целых веб-страниц, однако это не рекомендуемый вариант использования. Для больших макетов рассмотрим сетку(Grid). Flexbox, с другой стороны, больше подходит для небольших макетов и приложений, таких как:
- меню навигации
- раскладки карт
- медиа-элементы
- веб-формы
Поддержка Flexbox
Flexbox был впервые предложен в начале прошлого десятилетия и рекомендован W3C для принятия в 2012 году. С тех пор браузеры начали поддерживать его, и к настоящему времени все современные браузеры способны работать с flexbox.
Доступные свойства CSS Flexbox
Хорошо, теперь, когда мы определились с теорией, давайте посмотрим, что может сделать flexbox. С помощью приведенных ниже свойств вы можете управлять своим макетом, назначая признаки как контейнеру, так и отдельным элементам. Мы начнем с первого, а затем перейдем ко второму.
flex-direction
Это определяет основную ось и, как следствие, направление, в котором размещаются ваши гибкие элементы. Это также позволяет изменить порядок элементов, который раньше требовал изменения базового HTML-кода.
Доступны следующие параметры:
row – значение по умолчанию. Упорядочивает элементы flex слева направо, если только вы не находитесь в среде справа налево из-за режима записи.
row-reverse – упорядочивает элементы по горизонтали, но в обратном порядке.
column – то же самое, что и row, но вертикальное расположение элементов сверху вниз.
column-reverse – вы, возможно, можете догадаться об этом. column-reverse отображает элементы снизу вверх.
flex-wrap
По умолчанию элементы в контейнере flex располагаются в одну строку. flex-wrap позволяет вам изменить это.
nowrap – значение по умолчанию, которое помещает все элементы в одну строку.
wrap – если одной строки недостаточно, то при этом элементы будут располагаться в несколько строк сверху вниз.
wrap-reverse – то же самое, что wrap, но с элементами, упорядоченными снизу вверх.
flex-flow
Это сокращение от flex-direction и flex-wrap. Использование:
Свойство flex-flow позволяет определить обе основные оси контейнера. Значение по умолчанию row nowrap, применяются все возможные значения из двух вышеприведенных свойств.
Justify-content
Следующее свойство Flexbox CSS определяет выравнивание элемента по главной оси. Он решает, что происходит с любым доступным свободным пространством, и имеет некоторый контроль над выравниванием, когда элементы становятся шире, чем их контейнер. Вот значения, которые вы можете выбрать:
flex-start – значение по умолчанию. Элементы выравниваются по направлению к передней части flex-direction.
flex-end – размещает элементы в конце flex-направления.
start – определяет начало режима записи в качестве начальной точки.
end – перемещает элементы к концу режима записи.
left – выравнивание по краю гибких элементов по направлению к левому краю контейнера. Если это не имеет смысла из-за направления изгиба, он ведет себя как старт.
right – то же, что и левый, но для правого края. center – элементы располагаются горизонтально.
space-between – равномерно распределяет предметы внутри контейнера. Первый ближе к началу, последний ближе к концу с ровным пространством между ними (отсюда и название).
space around – предметы равномерно размещены с равным пространством вокруг них. Обратите внимание, что он ведет себя как поле или отступ, где у вас есть двойное пространство между элементами по направлению к краям.
space-evenly – предметы располагаются равномерно внутри контейнера, но расстояние между ними и по направлению к краям контейнера является равномерным.
Order
Начиная с этого правила, все остальные правила применяются к гибким элементам, а не к контейнеру. Свойство order управляет тем, в каком порядке элементы заказа отображаются в контейнере.
Например, значение по умолчанию для всех элементов flex-order: 0;. Если вы хотите переместить определенный элемент в начало или конец строки, вы можете сделать это, присвоив ему значение 1 или -1. Это также работает через границы строк или столбцов в отличие от row-reverse или column-reverse, которые будут отменять порядок для каждой строки индивидуально.
flex-grow
Управляет способностью гибких элементов расти в контейнере по мере необходимости. flex-grow принимает число, которое описывает пропорцию.
Пример: если все элементы настроены на flex-grow: 1; все они равномерно распределены внутри своего контейнера. Однако если один из них установлен на 1, а другой на 3, то последний попытается занять три четверти доступного пространства.
flex-shrink
Flex-shrink похож на flex-grow, но определяет способность элементов сжиматься по отношению к другим элементам. Чем больше число, тем больше элемент будет уменьшаться в размере и наоборот.
flex-basis
Определяет размер элемента по умолчанию (высота или ширина в зависимости от оси). Это может быть относительное значение, например 15%, или полное как 30px.
flex
Сокращение от flex-grow, flex-shrink и flex-basis вместе взятых. Только первый параметр является обязательным, а значение по умолчанию равно 0 1 auto.
Часто имеет смысл использовать это свойство вместо flex-grow, flex-shrink или flex-basis по отдельности, поскольку оно применяет разумные значения к операторам, которые вы не используете.
flex также может принимать начальный (придерживается определенного размера, если он есть), автоматический (делает его полностью гибким) и нулевой (делает все элементы негибкими). Вы можете использовать это, например, чтобы установить некоторые элементы на фиксированную ширину (через начальную), в то время как другие приспосабливаются к доступному пространству.
align-self
Это позволяет переопределить выравнивание отдельных элементов. Он имеет те же значения, что и align-items.
В двух словах о Flexbox
В веб-дизайне существует множество различных способов создания макетов и упорядочивания элементов. Flexbox становится все более и более распространенным. Модуль CSS предлагает множество преимуществ, особенно для динамических макетов, небольших элементов страницы и мобильного дизайна.
Выше мы рассмотрели, что такое flexbox, его возможности и как его использовать. В следующий раз, когда вы обнаружите, что хотите использовать float или inline-block, подумайте, может ли flexbox быть лучшим решением.
