Как выровнять элементы в CSS

Сегодня у нас есть целый набор способов выравнивания вещей в CSS, и не всегда очевидно, какой из них использовать. Однако знание того, что доступно, означает, что вы всегда можете попробовать несколько тактик, если столкнетесь с определенной проблемой выравнивания.

В этой статье я рассмотрю различные методы выравнивания. Вместо того, чтобы предоставлять подробное руководство по каждому из них, я объясню несколько точек преткновения, с которыми сталкиваются люди, и укажу на более полные ссылки на свойства и значения. Как и в случае с большей частью CSS, вы можете пройти долгий путь, поняв фундаментальные вещи о том, как ведут себя методы, а затем вам понадобится место для поиска более тонких деталей с точки зрения того, как вы достигаете точного макета, который вы хотите.

Выравнивание текста и встроенных элементов

Когда у нас есть некоторый текст и другие встроенные элементы на странице, каждая строка содержимого обрабатывается как строковое поле. Свойство text-align выровняет этот контент на странице, например, если вы хотите, чтобы ваш текст был по центру или по ширине. Однако иногда вы можете захотеть выровнять элементы внутри этой строки по отношению к другим элементам, например, если у вас есть значок, отображаемый рядом с текстом, или текст разных размеров.

В приведенном ниже примере у меня есть текст с увеличенным встроенным изображением. Я использую vertical-align: middle на изображении, чтобы выровнять текст по середине изображения.

Свойство line-height и выравнивание

Помните, что свойство line-height изменит размер строки и, следовательно, может изменить ваше выравнивание. В следующем примере используется большое значение высоты строки 150 пикселей, и я выровнял изображение по top краю. Изображение выравнивается по верхней части строки, а не по верхней части текста, удалите эту высоту строки или сделайте ее меньше размера изображения, и изображение и текст будут выровнены поверх текста.

Оказывается, line-height и даже размер текста довольно сложны, и в этой статье я не собираюсь копаться в этой кроличьей норе. Если вы пытаетесь точно выровнять встроенные элементы и хотите действительно понять, что происходит, я рекомендую прочитать «Глубокое погружение в CSS: метрики шрифтов, line-height и vertical-align ».

Когда я могу использовать свойство vertical-align ?

Свойство vertical-align полезно, если вы выравниваете любой встроенный элемент. Сюда входят элементы с display: inline-block . Содержимое ячеек таблицы также можно выровнять с помощью свойства vertical-align .

Свойство vertical-align не влияет на гибкие элементы или элементы сетки, и поэтому, если оно используется как часть резервной стратегии, оно перестанет применяться в ту минуту, когда родительский элемент будет преобразован в сетку или гибкий контейнер. Например, в следующем ручке у меня есть набор элементов, выложенных с помощью display: inline-block и это означает, что я получаю возможность выравнивать элементы, даже если в браузере нет Flexbox:

В следующем ручке я рассматривал inline-block как запасной вариант для макета Flex. Свойства выравнивания больше не применяются, и я могу добавить align-items для выравнивания элементов во Flexbox. Вы можете сказать, что метод Flexbox работает, потому что разрыв между элементами, который вы получите при использовании display: inline-block , исчез.

Тот факт, что vertical-align работает с ячейками таблицы, является причиной того, что прием вертикального центрирования элемента с использованием display: table-cell работает.

Теперь, когда у нас есть лучшие способы выравнивания блоков в CSS (как мы рассмотрим в следующем разделе), нам не нужно использовать свойства vertical-align и text-align в других местах, кроме встроенных и текстовых элементов для которые они были разработаны. Тем не менее, они по-прежнему полностью допустимы для использования в этих текстовых и встроенных форматах, и поэтому помните, если вы пытаетесь выровнять что-то встроенное, вам нужно использовать именно эти свойства, а не свойства Box Alignment.

Выравнивание коробки

Спецификация Box Alignment описывает, как мы выравниваем все остальное. В спецификации подробно описаны следующие свойства выравнивания:

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

Возможно, вы уже думаете об этих свойствах как о части спецификации Flexbox или, возможно, Grid. История свойств такова, что они возникли как часть Flexbox и до сих пор существуют в спецификации уровня 1; однако они были перемещены в собственную спецификацию, когда стало очевидно, что они более полезны в целом. Теперь мы также используем их в Grid Layout, и они указаны и для других методов макета, хотя текущая поддержка браузера означает, что вы пока не сможете их использовать.

Поэтому в следующий раз, когда кто-то в Интернете скажет вам, что вертикальное выравнивание — самая сложная часть CSS, вы можете сказать ему следующее (что даже вписывается в твит):

 .container { display: flex; align-items: center; justify-content: center; }

В будущем мы, возможно, даже сможем обойтись без display: flex , как только свойства Box Alignment будут реализованы для Block Layout. На данный момент, однако, сделать родительский объект, который вы хотите центрировать, гибким контейнером — это способ получить выравнивание по горизонтали и вертикали.

Два типа выравнивания

При выравнивании элементов flex и grid у вас есть две возможности выравнивания:

1. У вас есть свободное место в сетке или гибком контейнере (после размещения элементов или дорожек).
2. У вас также есть сам элемент внутри области сетки, в которую вы его поместили, или на поперечной оси внутри гибкого контейнера.

Я показал вам набор свойств выше, и свойства выравнивания можно рассматривать как две группы. Те, которые связаны с распределением свободного места, и те, которые выравнивают сам элемент.

Работа с пустым пространством: align-content и justify-content

Свойства, оканчивающиеся на -content , относятся к распределению пространства, поэтому, когда вы решите использовать align-content или justify-content , вы распределяете доступное пространство между дорожками сетки или гибкими элементами. Они не изменяют размер самих элементов гибкости или сетки; они перемещают их, потому что они меняют местонахождение свободного места.

Ниже у меня есть пример гибкости и пример сетки. У обоих есть контейнер, который больше, чем требуется для отображения гибких элементов или дорожек сетки, поэтому я могу использовать align-content и justify-content для распределения этого пространства.

Перемещение элементов вокруг: justify-self , align-self , justify-items и align-items

Затем у нас есть align-self и justify-self применительно к отдельным элементам flex или grid; вы также можете использовать align-items и justify-items в контейнере, чтобы сразу установить все свойства. Эти свойства относятся к фактическому гибкому элементу или элементу сетки, то есть к перемещению содержимого внутри области сетки или гибкой линии.

• Макет сетки
  Вы получаете оба свойства, так как можете смещать элемент на блочной и встроенной оси, поскольку у нас есть определенная область сетки, в которой он находится.
• Гибкий макет
  Вы можете выравнивать только по поперечной оси, так как главная ось контролируется только распределением пространства. Итак, если ваши элементы расположены в ряд, вы можете использовать align-self , чтобы перемещать их вверх и вниз внутри flex-линии, выравнивая их относительно друг друга.

В приведенном ниже примере у меня есть контейнер flex и grid, и я использую align-items и align-self во Flexbox для перемещения элементов вверх и вниз относительно друг друга по поперечной оси. Если вы используете Firefox и проверяете элемент с помощью Firefox Flexbox Inspector, вы можете увидеть размер гибкого контейнера и то, как элементы внутри него перемещаются по вертикали.

В сетке я могу использовать все четыре свойства для перемещения элементов внутри их области сетки. Еще раз, Firefox DevTools Grid Inspector будет полезен при игре с выравниванием. С наложенными линиями сетки вы можете увидеть область, внутри которой перемещается содержимое:

Поэкспериментируйте со значениями в демо-версии CodePen, чтобы увидеть, как вы можете перемещать содержимое в каждом методе макета:

Смущенный align и justify

Одна из упомянутых проблем с людьми, помнящими свойства выравнивания в Grid и Flexbox, заключается в том, что никто не может вспомнить, следует ли выравнивать или выравнивать. Какое направление какое?

Для макета сетки вам нужно знать, выравниваете ли вы в блочном или встроенном направлении. Направление блока — это направление блоков, расположенных на вашей странице (в вашем режиме письма), т. е. для английского языка — вертикальное. Направление Inline — это направление, в котором идут предложения (например, для английского языка слева направо по горизонтали).

Чтобы выровнять элементы в направлении блока, вы будете использовать свойства, начинающиеся с align- . Вы используете align-content для распределения пространства между дорожками сетки, если в контейнере сетки есть свободное место, и align-items или align-self для перемещения элемента внутри области сетки, в которую он был помещен.

В приведенном ниже примере есть два макета сетки. У одного есть writing-mode: horizontal-tb (который используется по умолчанию для английского языка), а у другого writing-mode: vertical-rl . Это единственная разница между ними. Вы можете видеть, что свойства выравнивания, которые я применил, работают одинаково на оси блока в обоих режимах.

Чтобы выровнять элементы в линейном направлении, используйте свойства, начинающиеся с justify- . Используйте justify-content , чтобы распределить пространство между дорожками сетки, и justify-items или justify-self , чтобы выровнять элементы внутри их области сетки в линейном направлении.

Еще раз, у меня есть два примера макета сетки, чтобы вы могли видеть, что встроенный текст всегда является встроенным — независимо от того, какой режим записи вы используете.

Flexbox немного сложнее из-за того, что у нас есть главная ось, которую можно изменить на row или column . Итак, давайте сначала подумаем об этой главной оси. Он устанавливается с помощью свойства flex-direction . Начальное значение (или значение по умолчанию) этого свойства — row , которое будет размещать flex-элементы в виде строки в используемом в настоящее время режиме письма — вот почему при работе на английском языке мы получаем элементы, расположенные горизонтально, когда мы создаем гибкий контейнер. Затем вы можете изменить основную ось на flex-direction: column , и элементы будут расположены в виде столбца, что означает, что они расположены в направлении блока для этого режима записи.

Поскольку мы можем переключать оси, самым важным фактором во Flexbox является вопрос: «Какая ось является моей главной осью?» Как только вы это узнаете, то для выравнивания (на главной оси) вы просто используете justify-content . Неважно, является ли ваша главная ось строкой или столбцом. Вы контролируете пространство между flex-элементами с помощью justify-content .

На поперечной оси вы можете использовать align-items которые будут выравнивать элементы внутри flex-контейнера или flex-линии в многострочном flex-контейнере. Если у вас есть многострочный контейнер с использованием flex-wrap: wrap и в этом контейнере есть место, вы можете использовать align-content для распределения пространства по поперечной оси.

В приведенном ниже примере мы делаем и с гибким контейнером, отображаемым в виде строки и столбца:

Когда justify-content или align-content не работает

Свойства justify-content и align-content в Grid и Flexbox предназначены для распределения дополнительного пространства . Итак, нужно проверить, есть ли у вас дополнительное место.

Вот пример Flex: я установил flex-direction: row и у меня есть три элемента. Они не занимают все пространство в контейнере flex, поэтому у меня есть свободное место на главной оси, начальное значение для justify-content равно flex-start , поэтому все мои элементы выстраиваются в линию в начале и дополнительном пространстве. находится в конце. Я использую Firefox Flex Inspector, чтобы выделить пространство.

Если я изменю flex-direction на space-between , это дополнительное пространство теперь будет распределяться между элементами:

Если теперь я добавлю больше контента к своим элементам, чтобы они стали больше и больше не было дополнительного места, то justify-content ничего не делает — просто потому, что нет места для распространения.

Мне часто задают вопрос, почему justify-content не работает, когда flex-direction имеет column . Обычно это происходит потому, что нет места для распространения. Если вы возьмете приведенный выше пример и сделаете его flex-direction: column , элементы будут отображаться в виде столбца, но под элементами не будет дополнительного пространства, как при использовании flex-direction: row . Это связано с тем, что когда вы создаете Flex-контейнер с display: flex , у вас есть гибкий контейнер уровня блока; это займет все возможное пространство в линейном направлении. В CSS элементы не растягиваются в направлении блока, поэтому нет лишнего пространства.

Добавьте высоту к контейнеру, и — если это больше, чем требуется для отображения элементов — у вас будет дополнительное пространство, и, следовательно, в вашем столбце будет работать justify-content .

Почему во Flexbox нет justify-self ?

Grid Layout реализует все свойства для обеих осей, потому что у нас всегда есть две оси для работы в Grid Layout. Мы создаем дорожки (которые могут оставлять дополнительное пространство в контейнере сетки в любом измерении), и поэтому мы можем распределить это пространство с помощью align-content или justify-content . У нас также есть области сетки, и элемент в этой области может не занимать все пространство области, поэтому мы можем использовать align-self или justify-self для перемещения содержимого по области (или align-items , justify-items ). чтобы изменить выравнивание всех элементов).

Flexbox не имеет дорожек, как в макете Grid. На главной оси все, с чем нам нужно поиграть, — это распределение пространства между элементами. Не существует понятия дорожки, в которую помещается гибкий элемент. Таким образом, не создается области, в которой можно перемещать элемент. Вот почему во Flexbox нет свойства justify-self на главных осях.

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

Автоматическое поле будет занимать все пространство в том направлении, в котором оно применяется, поэтому мы можем центрировать блок (например, наш макет главной страницы), используя левое и правое поля автоматически. С автоматическим полем с обеих сторон каждое поле пытается занять все пространство и, таким образом, толкает блок в середину. С нашей строкой flex-элементов мы можем добавить margin-left: auto к элементу, на котором мы хотим, чтобы произошло разделение, и пока во flex-контейнере есть свободное место, вы получите разделение. Это хорошо работает с Flexbox, потому что, как только нет свободного места, элементы ведут себя как обычные flex-элементы.

Flexbox и микрокомпоненты

Я думаю, что одна из вещей, которую часто упускают из виду, — насколько полезен Flexbox для выполнения небольших заданий по макету, когда вы можете подумать, что использование vertical-align — это путь. Я часто использую Flexbox для аккуратного выравнивания небольших шаблонов; например, выравнивание значка рядом с текстом, выравнивание двух элементов по базовой линии с разными размерами шрифта или правильное выравнивание полей формы и кнопок. Если вы изо всех сил пытаетесь заставить что-то красиво выровняться с помощью vertical-align , то, возможно, попробуйте выполнить эту работу с помощью Flexbox. Помните, что вы также можете создать встроенный гибкий контейнер, если хотите, с помощью display: inline-flex .

Нет никаких причин не использовать Flexbox или даже Grid для небольших заданий макета. Они предназначены не только для больших кусков макета. Попробуйте разные доступные вам вещи и посмотрите, что работает лучше всего.

Люди часто очень хотят знать, как правильно или неправильно поступать. В действительности часто нет правильного или неправильного; небольшая разница в вашем шаблоне может означать, что Flexbox работает лучше всего, в то время как в противном случае вы бы использовали vertical-align .

Подведение итогов

В завершение у меня есть краткий обзор основ выравнивания. Если вы помните эти несколько правил, вы должны быть в состоянии выровнять большинство вещей с помощью CSS:

1. Вы выравниваете текст или встроенный элемент? Если это так, вам нужно использовать text-align , vertical-align и line-height .
2. У вас есть элемент или элементы, которые вы хотите выровнять по центру страницы или контейнера? Если это так, сделайте контейнер flex-контейнером, затем установите align-items: center и justify-content: center .
3. Для макетов сетки свойства, начинающиеся с align- , работают в направлении блока; те, которые начинаются с justify- работают во встроенном направлении.
4. Для макетов Flex свойства, начинающиеся с align- , работают на поперечной оси; те, которые начинаются с justify- работают на главной оси.
5. Свойства justify-content и align-content распределяют дополнительное пространство. Если у вас нет лишнего места в контейнере flex или grid, они ничего не сделают.
6. Если вы считаете, что вам нужно justify-self во Flexbox, то использование автоматического поля, вероятно, даст вам шаблон, который вам нужен.
7. Вы можете использовать Grid и Flexbox вместе со свойствами выравнивания для небольших заданий макета, а также для основных компонентов — экспериментируйте!

Дополнительные сведения о выравнивании см. в следующих ресурсах:

• Выравнивание блоков CSS (веб-документы MDN)
• Все, что вам нужно знать о выравнивании во Flexbox
• Шпаргалка по выравниванию коробки