Выравнивание блоков равномерно по горизонтали
Есть три блока на сайте одинаковой высоты, расположенные в одну строку. Левый (1) привязан к левой стороне браузера, а средний (2) и правый (3) к правой стороне браузера.
(источник: joxi.ru) Задача: нужно, чтобы средний блок (2) всегда был посередине, относительно других блоков, чтобы расстояние между 1-2 и 2-3 были одинковыми. Как это реализовать? Вот пример того, что мне нужно. Теперь расстояния А и Б одинаковы всегда при изменении окна браузера: 
(источник: joxi.ru)
Отслеживать
1,183 2 2 золотых знака 14 14 серебряных знаков 19 19 бронзовых знаков
Выравнивание блоков в разметке Flexbox
Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей выравнивания блоков, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.
Основной пример
В этом примере три элемента flex выровнены по главной оси с помощью атрибута justify-content и по поперечной оси с помощью атрибута align-items . Первый элемент переопределяет значения align-items , устанавливая значение атрибута align-self в center .
Оси и атрибут flex-direction
Разметка flexbox следует согласно режиму чтения документа (writing mode), поэтому, если вы используете английский язык и устанавливаете атрибут justify-content в значение flex-end , то элементы будут выровнены по концу flex контейнера. Если вы работаете со значением атрибута flex-direction , установленным в row , то выравнивание будет происходить в линейном направлении.
Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута flex-direction в column . В этом случае, атрибут justify-content будет выравнивать элементы в направлении блока. Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:
- Главная ось = направление согласно атрибуту flex-direction = выравнивание через атрибут justify-content
- Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут align-content , align-self / align-items
Выравнивание по Главной Оси
Выравнивание по Поперечной Оси
Отсутствие атрибута justify-self в разметке Flexbox
При использовании разметки flexbox, главная ось работает с нашим контентом как с группой. Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения. Атрибут justify-content контролирует использование оставшегося пространства. Если установить атрибут justify-content в значение flex-end , то дополнительное пространство заполнится перед элементами, если установить атрибут justify-content в значение space-around , то пространство заполнится с обеих сторон элемента в этом измерении и т. д.
Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.
Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.
Выравнивание и свойство margin: auto
В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self . Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto . Атрибут с таким значением будет занимать все доступное пространство в своём измерении. Так работает центрирование блока со свойством margin:auto . Установив значение атрибутов margin-left и margin-right в значение auto , обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.
Установив значение атрибута margin в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.
Атрибуты разрыва
Создание разрыва фиксированного размера между элементами
На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.
На поперечной оси атрибут row-gap создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap , чтобы применить эффект.
Примечание: Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.
Горизонтальное и вертикальное выравнивание
Центрирование элементов
по горизонтали и вертикали
Выравнивание элементов по центру
Чтобы горизонтально выровнять по центру блоковый элемент (например, ), можно использовать свойство margin: auto; .
Определение ширины элемента предотвратит его вытягивание до границ контейнера.
При таких установках элемент займет заданную ширину, а оставшееся пространство будет поровну поделено между двумя отступами:
Это элемент div расположен по центру.
.center
Внимание! Выравнивание по центру не будет работать, если свойство width не установлено (или установлено в 100%).
Выравнивание текста по центру
Чтобы внутри элемента выровнять только текст, используется свойство text-align: center; .
Этот текст выровнен по центру.
.center
Выравнивание изображения по центру
Чтобы выровнять изображение по центру, нужно сделать элемент блоковым и установить левый и правый отступы в значение auto :
Выравнивание по левому/правому краю — Используем свойство position
Один из способов выровнять элемент по левому или правому краю, это использовать свойство position: absolute; :
Значимость этих проблем настолько очевидна, что укрепление и развитие внутренней структуры прекрасно подходит для реализации кластеризации усилий.
.right
Внимание! Абсолютное позиционирование элемента удаляет его из обычного потока вывода. В результате этого такой элемент может перерывать другие элементы.
Выравнивание по левому/правому краю — Используем свойство float
Другой способ выровнять элемент по левому или правому краю, это использовать свойство float :
Значимость этих проблем настолько очевидна, что укрепление и развитие внутренней структуры прекрасно подходит для реализации кластеризации усилий.
.right
Прием clearfix
Если высота плавающего элемента (с заданным свойством float ) больше, чем высота его контейнера, то он будет «переполнять» его и выходить за его пределы. Чтобы это исправить, можно воспользоваться специальным приемом clearfix.
Без clearfix
С clearfix
Мы можем добавить к элементу контейнеру специальный код, который решит эту проблему:
.clearfix::after
Центрирование по вертикали — Используем свойство padding
В CSS существует множество способов центрирования элемента по вертикали. Самое простое решение, это использовать свойства padding-top и padding-bottom :
Я центрирован по вертикали.
.center
Чтобы центрировать и по вертикали и по горизонтали, используются свойства padding и text-align: center :
Я центрирован вертикально и горизонтально.
.center
Центрирование по вертикали — Используем свойство line-height
Еще один способ центрировать элемент вертикально, это использовать свойство line-height со значением, равным значению свойства height :
Я центрирован вертикально и горизонтально.
.center < line-height: 200px; height: 200px; border: 3px solid green; text-align: center; >/* Если в тексте несколько строк, добавьте такой код: */ .center p
Центрирование по вертикали — Используем свойства position и transform
Если свойства padding и line-height использовать не хочется, то есть другое решение — использовать позиционирование и свойство transform :
Я центрирован вертикально и горизонтально.
.center < height: 200px; position: relative; border: 3px solid green; >.center p
Центрирование по вертикали — Используем Flexbox
Также, чтобы элемент разместить по центру, можно использовать flexbox. Следует только помнить, что flexbox не поддерживается в браузерах IE10 и более ранних версий:
Горизонтальное и вертикальное выравнивание элементов
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
.wrapper
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
.wrapper .box < width: 400px; position: absolute; left: 50%; margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/ >1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
.wrapper .box < display: inline-block; /*располагаем блоки в ряд по горизонтали*/ margin-right: -0.25em; /*убираем правый отступ между блоками*/ >2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button
2.2. Для выравнивания блока по вертикали внутри родительского блока:
.wrapper .box
2.3. Вертикальное выравнивание по типу таблицы:
.wrapper < display: table; width: 100%; >.box
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
.wrapper < position: relative; >.box < height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*чтобы контент не расползался*/ >2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
если для элемента не заданы размеры и он не пустой
Some text here