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

Как выровнять элементы по вертикали css flex

  • автор:

Выравнивание элементов. align-items и align-self¶

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

  • stretch : значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
  • flex-start : элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
  • flex-end : элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
  • center : элементы выравниваются по центру flex-контейнера
  • baseline : элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

 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 77 78 79
 html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; height: 5em; > .flex-start  align-items: flex-start; > .flex-end  align-items: flex-end; > .center  align-items: center; > .baseline  align-items: baseline; > .flex-item  text-align: center; font-size: 1em; padding: 1.2em; color: white; > .largest-item  padding-top: 2em; > .color1  background-color: #675ba7; > .color2  background-color: #9bc850; > .color3  background-color: #a62e5c; > .color4  background-color: #2a9fbc; > style> head> body> h3>Flex-starth3> div class="flex-container flex-start"> 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>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>Baselineh3> div class="flex-container baseline"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2 largest-item"> Flex Item 2 div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> body> html> 

Выравнивание элементов. align-items и align-self

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:

1 2 3 4 5 6
.flex-container  display: flex; border: 1px #ccc solid; flex-direction: column; width: 12em; > 

Выравнивание элементов. align-items и align-self

Свойство align-self¶

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение auto :

  • auto : значение по умолчанию, при котором элемент получает значение от свойства align-items , которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch .
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
 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
 html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; justify-content: space-between; align-items: stretch; height: 12em; > .flex-item  text-align: center; font-size: 1em; padding: 1.2em; color: white; > .item1  background-color: #675ba7; align-self: center; > .item2  background-color: #9bc850; align-self: flex-start; > .item3  background-color: #a62e5c; align-self: flex-end; > .item4  background-color: #2a9fbc; align-self: center; > style> head> body> h3>Align-selfh3> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div class="flex-item item4">Flex Item 4div> div> body> html> 

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch; . Однако каждый из элементов переопределяет это поведение:

Выравнивание отдельного элемента в flex модели в CSS

Следующие свойства, которые мы изучим, задаются уже не родителю флекс-элементов, а самим элементам. Давайте рассмотрим свойство aling-self , которое выраванивает отдельный блок по поперечной оси.

Пусть у нас есть флекс-блоки, выстроенные в ряд. Выровняем их по центру по вертикали, задав align-items в значении center , а второму элементу дадим дополнительный класс elem и для него зададим другое выравнивание, например, прижмем его к верхнему краю.

Для этого нашему элементу с классом elem установим свойство aling-self в значение flex-start :

1
2
3
4
5

.parent < display: flex; align-items: center; width: 300px; height: 200px; border: 1px solid red; >.child < width: 50px; height: 50px; border: 1px solid green; >.elem < align-self: flex-start; >

Повторите страницу по данному образцу:

Выравнивание элементов по главной оси — CSS: Основы Flex

Одна из главных «фишек» Flex — автоматический расчет расстояния между блоками. Давайте представим типичную верстку списка карточек товара в интернет-магазине.

В данном случае между карточками расстояние по 20 пикселей по горизонтали и вертикали. Попробуем воспроизвести такую структуру, используя свойство float, и посмотрим, с какими трудностями мы столкнемся.

Мы намеренно убрали весь текст, чтобы вы могли лучше увидеть расположение элементов без перехода на сайт CodePen. Обратите внимание, что для указания расстояния между карточками приходится использовать свойство margin, которое будет распространено на все элементы, и мы получим ненужный отступ справа у последней карточки, хотя его быть не должно. Эта проблема повредила нервы не одному поколению разработчиков. Они пытались выкрутиться самыми разными способами: использовали JavaScript; вручную выставляли класс, который отменит отступ; применяли псевдокласс :nth-child, причем он появился только в стандарте CSS3.

С использованием Flex данная задача решается одним простым правилом justify-content, которое может принимать одно из следующих основных значений:

все изменения производятся в классе .container

  • center. Все элементы помещаются в центре. Перенесем нашу верстку во флекс-контейнер и выставим свойство justify-content. Для наглядности у body стоит серый фон, а у контейнера белый. Также во второй строке уменьшилось количество элементов для визуальной наглядности работы свойств. Обратите внимание, что элементы во второй строке расположились в центре, сохранив те же отступы между собой, как и в первой строке.
  • flex-start. Элементы начинают располагаться с начала контейнера.
  • flex-end. Элементы начинают располагаться с конца контейнера.
  • space-between. При этом значении элементы выстраиваются автоматически. Первый элемент строки становится в начало контейнера, последний в конец. Остальные элементы равномерно занимают пустое пространство. В данном случае все отступы по главной оси высчитываются автоматически.
  • space-around. Более хитрое значение. Элементы, так же, как и при space-between, автоматически получают равное расстояние между соседями. При этом отступы появляются и в начале/конце флекс-контейнера. Эти отступы будут равны половине отступа между элементами.
  • space-evenly. Последнее правило, которое устанавливает одинаковые отступы со всех сторон у всех элементов в строке. В отличие от space-around первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.

Данные свойства помогут вам полноценно управлять отступами между элементами внутри флекс-контейнера и в любой момент изменять поведение с помощью смены всего одного значения, что очень удобно при создании адаптивных сайтов.

Выравнивание по поперечной оси

Для выравнивания по поперечной оси существует свойство align-items. Оно принимает следующие значения:

Самостоятельное задание

Создайте контейнер с несколькими элементами внутри и поставьте ему свойство flex-direction отличное от стандартного. Попробуйте использовать свойство justify-content, чтобы увидеть, как оно заработает. Данная трансформация свойства может быть вначале немного непонятна, но в реальном проекте это очень хороший способ работы с выравниванием блоков.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

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

Простейшая задача, ставящая некоторых начинающих верстальщиков в тупик: сделать колонки контейнера одной высоты и центрировать внутри них текст или другие вложенные элементы.

Не забудьте подписаться на мой канал.

Как только не извращались раньше верстальщики для выравнивания высоты элементов. Некоторые применяли для этого даже JavaScript. Но потом появились флексбоксы, которые сильно упростили жизнь верстальщиков. Но и по флексам все же иногда возникают вопросы.

Итак, первое, что приходит в голову для решения задачи: использовать для FLEX‑контейнера align-items: center . И это правильно, но тогда высота вложенных элементов будет разной.

А нам нужна единая растягивающаяся высота: align-items: stretch .
Естественно, align-items не может быть одновременно center и stretch .
Как быть?

Решение простое: делаем вложенные элементы резиновыми и тоже флексбоксами, а внутри них уже все центрируем по вертикали.

Должно получиться примерно так:

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

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