Как выровнять блок по центру css flex
Перейти к содержимому

Как выровнять блок по центру css flex

  • автор:

Как центрировать контент по вертикали и по горизонтали с помощью Flexbox

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

Сейчас мы пошагово покажем, как легко центрировать контент по вертикали и горизонтали.

Давайте поработаем с помощью этого примера:

Пример

html> html> head> title>Заголовок документа title> style> #big-box< width: 200px; height: 200px; background-color: #666666; > #small-box< width: 100px; height: 100px; background-color: #8ebf42; > style> head> body> h2>Центрирование контента h2> div id="big-box"> div id="small-box"> div> div> body> html>

Здесь имеет два div элемента. Наша задача — центрировать «small-box» id внутри «bix-box» id.

  1. Сначала мы используем свойство width, чтобы установить width для двух блоков. Установите необходимый размер.
  2. Потом установите высоту блоков, используя свойство height.
  3. Установите выбранные вами цвета для div элементов, используя свойство background-color.
#big-box< width: 200px; height: 200px; background-color: #666666; > #small-box< width: 100px; height: 100px; background-color: #8ebf42; >
  1. Следующим шагом укажите макет с помощью свойства display. Чтобы использовать Flexbox, установите display: flex. (display: -Webkit-flex;)
#big-box< width: 200px; height: 200px; background-color: #666666; display: flex; display: -webkit-flex; >

Значение flex должно использоваться вместе с расширением -webkit- для Safari, Google Chrome и Opera.

Ничто не изменится, если попробуйте этот код. Выполните следующие шаги!

  1. Добавьте свойство align-items. Это свойство указывает вертикальное выравнивание контента внутри флекс-контейнера. Необходимо установить свойство align-items в значение «center», чтобы по вертикали центрировать контент.
#big-box< width: 200px; height: 200px; background-color: #666666; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; >

Сейчас примените код и увидите, что «small-box» центрирован относительно вертикальной оси.

После того, как div элемент вертикально центрирован, можно центрировать его и по горизонтали.

  1. Необходимо применить свойство justify-content, которое выравнивает контент по горизонтали. Устанавливаем свойство justify-content в значение «center»:
#big-box< width: 200px; height: 200px; background-color: #666666; display: flex; align-items: center; justify-content: center; -webkit-align-items: center; >

Мы достигли нашей цели!

Пример

html> html> head> title>Заголовок документа title> style> #big-box< width: 200px; height: 200px; background-color: #666666; display: flex; align-items: center; justify-content: center; -webkit-align-items: center; > #small-box< width: 100px; height: 100px; background-color: #8ebf42; > style> head> body> h2>Центрирование контента h2> div id="big-box"> div id="small-box"> div> div> body> html>

-Webkit- для Safari, Google Chrome и Opera (новые версии) используется вместе со свойством align-items.

Рассмотрим другой пример:

Пример

html> html> head> title>Заголовок документа title> style> .flexbox-container < background: #cccccc; display: flex; align-items: center; -webkit-align-items: center; justify-content: center; height: auto; margin: 0; min-height: 500px; > .flexbox-item < max-height: 50%; background: #666666; font-size: 15px; > .fixed < flex: none; max-width: 50%; > .box < width: 100%; padding: 1em; background: #1c87c9; > style> head> body> h2>Центрирование контента h2> div class="flexbox-container"> div class="flexbox-item fixed"> div class="box"> h2>Центрирован с помощью Flexbox h2> p contenteditable="true">Этот блок центрирован и по вертикали и по горизонтали. p> div> div> div> body> html>

Блок остается центрированным, даже если текст меняется.

Как в Flexbox выровнять элементы по центру и справа

Освойте методику настройки стиля: центрируйте один элемент в flex-контейнере и выравнивайте другой по краю, применив justify-content: center для контейнера и назначив margin-left: auto элементу справа.

Скопировать код

 
По центру
Справа

Этот метод позволит поместить первый дочерний элемент строго в центр, а второй — прижать к правой границе контейнера.

Применяем автоматические отступы

Добавьте прецизионного контроля в позиционирование элементов с автоматическими отступами. Они не только дают возможность управлять расположением, но и обеспечивают гибкость в верстке. Примените этот трюк для текстовых блоков, изображений или кнопок call-to-action (CTA):

  • margin: auto : Центрирует элемент как горизонтально, так и вертикально.
  • margin-left: auto : Перемещает элемент к правомую границу, создавая приятную визуальную гармонию.
  • margin-right: auto : Отталкивает элемент к левой границе — ведь и она имеет значение.

Воспользуйтесь этими настройками для создания балансированного макета:

Выравнивание элементов. justify-content¶

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

  • flex-элементы не используют все пространство flex-контейнера
  • flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-content . Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:

  • flex-start : значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.
  • flex-end : последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее
  • center : элементы выравниваются по центру
  • space-between : если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start . В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементами
  • space-around : если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center . В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.

Выравнивание для расположения элементов в виде строки:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
 html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; > .flex-end  justify-content: flex-end; > .center  justify-content: center; > .space-between  justify-content: space-between; > .space-around  justify-content: space-around; > .flex-item  text-align: center; font-size: 1em; padding: 1.5em; color: white; > .color1  background-color: #675ba7; > .color2  background-color: #9bc850; > .color3  background-color: #a62e5c; > .color4  background-color: #2a9fbc; > .color5  background-color: #f15b2a; > style> head> body> h3>Flex-endh3> div class="flex-container flex-end"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Centerh3> div class="flex-container center"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Space-betweenh3> div class="flex-container space-between"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Space-aroundh3> div class="flex-container space-around"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> body> html> 

Выравнивание элементов. justify-content

Выравнивание при расположении в виде столбцов:

Выравнивание элементов. justify-content

См. также¶

Выравнивание элементов по центру и слева с flexbox в CSS

Применяйте комбинацию свойств justify-content: space-between; и псевдоэлемента, чтобы равномерно разделить пространство между элементами внутри flex-контейнера.

Скопировать код

  
Слева
Центр

Стиль .flex-container обеспечивает создание гибкой разметки, justify-content: space-between; равномерно разделяет пространство между элементами. Используя псевдоэлемент ::after , вы можете центрировать объект без внесения изменений в HTML-разметку. Для точного позиционирования центрального элемента задайте text-align: center; и flex: 2; .

Продвинутые техники

Рассмотрим подробнее методики реализации сложного выравнивания, когда базового инструментария недостаточно.

Управление сложными макетами при помощи CSS Grid

Для работы со сложной структурой макетов и обеспечения единообразия выравнивания на дисплеях различного размера лучшим средством является CSS Grid:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *