Руководство по CSS Flexbox для начинающих

Руководство по CSS Flexbox для начинающих

По мере развития веб-дизайна появились различные стандартные способы размещения элементов на веб-сайте. 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 быть лучшим решением.


.

  • September 16, 2020