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

как выровнять flex по центру? [закрыт]

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 5 лет назад .

Ребята,как выровнять flex по центру? стоит display: flex; justify-content: space-between; align-content: center;

Гайд по flexbox

Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

Время чтения: 12 мин

Открыть/закрыть навигацию по статье

Что это?
Основные термины
Свойства флекс-контейнера
1. display
2. flex-direction
3. flex-wrap
4. flex-flow
5. justify-content
6. align-items
7. align-content
8. gap
1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self
7. Ссылки
1. Андрей Захаров советует
2. Егор Левченко советует
3. Алёна Батицкая советует
1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?
Контрибьюторы:
- Егор Левченко ,
- Светлана Коробцева ,
- Дмитрий Приходько ,
- Дима Шелков
Обновлено 8 марта 2023

Что это?

Скопировать ссылку «Что это?» Скопировано

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

Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).

Основные термины

Скопировать ссылку «Основные термины» Скопировано
- Флекс-контейнер: элемент, к которому применяется свойство display : flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
- Флекс-элемент: элемент, вложенный во флекс-контейнер.
- Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы.
- Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна.
- Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
- Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.
- Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
- Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.
Свойства флекс-контейнера

Скопировать ссылку «Свойства флекс-контейнера» Скопировано

display

Скопировать ссылку «display» Скопировано
```
 .container  display: flex;> .container  display: flex; >      
```
Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.

Снаружи флекс-контейнер выглядит как блочный элемент — занимает всю ширину родителя, следующие за ним элементы в разметке переносятся на новую строку.
```
 .container  display: inline-flex;> .container  display: inline-flex; >      
```
Если контейнеру задано значение inline — flex , то снаружи он начинает вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, встаёт в строку с другими элементами. Внутри это ровно такой же флекс-контейнер, как и при предыдущем значении.

flex — direction

Скопировать ссылку «flex-direction» Скопировано

Свойство управления направлением основной и поперечной осей.
```
 .container  display: flex; flex-direction: row;> .container  display: flex; flex-direction: row; >      
```
- row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
- row — reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
- column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
- column — reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.
flex — flow

Скопировать ссылку «flex-flow» Скопировано

Это свойство-шорткат для одновременного определения значений свойств flex — direction и flex — wrap .
```
 .container  display: flex; flex-flow: column wrap;> .container  display: flex; flex-flow: column wrap; >      
```
```
 .container  display: flex; flex-flow: row nowrap;> .container  display: flex; flex-flow: row nowrap; >      
```
flex — grow

Скопировать ссылку «flex-grow» Скопировано
```
 .container  display: flex;> .item  flex-grow: 1;> .container  display: flex; > .item  flex-grow: 1; >      
```
Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.

Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.

flex — shrink

Скопировать ссылку «flex-shrink» Скопировано
```
 .container  display: flex;> .item  flex-shrink: 3;> .container  display: flex; > .item  flex-shrink: 3; >      
```
Свойство flex — shrink полностью противоположно свойству flex — grow . Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.

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

Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

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

flex — basis

Скопировать ссылку «flex-basis» Скопировано
```
 .container  display: flex;> .item  flex-basis: 250px;> .container  display: flex; > .item  flex-basis: 250px; >      
```
Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

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

flex

Скопировать ссылку «flex» Скопировано
```
 .container  display: flex;> .item  flex: 1 1 auto;> .container  display: flex; > .item  flex: 1 1 auto; >      
```
Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex — grow , flex — shrink и flex — basis . Первое значение является обязательным, остальные опциональны.

Значение по умолчанию: 0 1 auto , что расшифровывается как flex — grow : 0 , flex — shrink : 1 , flex — basis : auto .
```
 /* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset; /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;      
```
align — self

Скопировать ссылку «align-self» Скопировано
```
 .container  display: flex; align-items: flex-start;> .item  align-self: flex-end;> .container  display: flex; align-items: flex-start; > .item  align-self: flex-end; >      
```
При помощи этого свойства можно выровнять один или несколько элементов иначе, чем задано у родительского элемента. Например, в коде выше у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.

Ссылки

Скопировать ссылку «Ссылки» Скопировано
1. Как реально работает flex — grow
2. Как реально работает flex — shrink
3. Песочница Флексбоксов
4. Game: Flexbox Froggy
5. Game: Flexbox Defense
6. Game: Flexbox Ducky
7. Курс по Флексбоксам от Wes Bos
Как выровнять блок-контейнер по центру страницы

@HamSter, я так тоже в начале ответил, но в вопросе написано: по центру страницы. То есть не только по осиX, а и по осиY.

30 ноя 2018 в 14:44
@ВиталикЧерный, «независимо от ширины страницы» обычно это означает по горизонтали.
30 ноя 2018 в 15:26

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

Можно использовать Grid Layout или Flex Layout, но прежде убедитесь, что требование заказчика позволяет использовать эти технологии. Для этого есть хороший сайт: Can I use. . Удачи!

UPD: Исправил пример. Подумал что нужно просто центрировать элемент по оси: X. Если все же нужно просто центрировать элемент: container по оси: X, то задайте свойства: margin: 0 auto; , и пропишите свою ширину, ибо это блочный элемент, и он по ширине занимает всё допустимое пространство.
```
.page < height: 100vh; display: flex; align-items: center; justify-content: center; >.container
```
```
 Lorem
 
```
doctor Brain

Эта статья будет полезна для тех, кто только начинает свой путь в веб-разработке. Выравнивание элемента по центру — достаточно распространенная задача, но каждый из нас все равно когда-то испытывал связанные с этим затруднения и искал оптимальные способы выравнивания по центру одного блока относительно другого c помощью Google или Stackoverflow. Несомненно, это простая задача. Однако, наличие большого количества элементов и стилей зачастую приводит к обидным ошибкам.

Ниже мы разберем несколько способов выравнивания блока по центру.

Text-align

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

Как это делается?
1. вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется wrapper или container),
2. задайте для этого (родительского) элемента CSS-свойство text-align: center,
3. для выравниваемого элемента создайте свойство display: inline-block.
В примере для синего квадрата есть блок-обертка blue-square-container , для которого определено выравнивание текста по центру text-align: center, а для самого квадрата есть свойство display: inline-block.

Следует обратить внимание на то, что по умолчанию для свойства display div получает значение block и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.

В свою очередь для inline-block элемента:
1. ширина определяется содержимым или установленным фиксированным значением,
2. выравнивание относительно родительского блока происходит по правилам, установленным для строчных элементов.
Margin: auto

Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например: margin: 0 auto). В этом случае не имеет значения: есть ли родительский элеменет и что с ним происходит.

Мы просто применяем margin: 0 auto к желтому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.

margin: 0 auto — короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.

Важно, чтобы для выравниваемого элемента была установлена фиксированная ширина (в нашем случае для желтого квадрата width: 100px), без нее браузер не сможет рассчитать значения правого и левого внешних отступов, чтобы установить элемент по центру.

Вместо 0 можно установить любые необходимые значения для верхнего и нижнего внешних отступов.

Еще один интересный прием — установить значение auto только для margin-left или только для margin-right, что позволит сместить элемент, соответственно, вправо или влево (попробуйте).

Абсолютное позиционирование

Элемент с абсолютным позиционированием можно разместить в любом месте страницы, но с одной особенностью.

Элемет с абсолютным позиционированием выпадает из потока страницы. То есть остальные элементы страницы ведут себя так, будто абсолютно позиционированного элемента вовсе не существует.

Почему это важно?

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

Если мы хотим просто разместить блок по центру, как в двух предыдущих примерах, нужно выполнить три действия:
1. установить элементу свойство position: absolute,
2. применить свойство left: 50%,
3. установить margin-left равным половине ширины элемента с отрицательным значением.
В данном случае, для этого примера создан зеленый квадрат с такими же размерами, как и в остальных случаях, то есть ширина равна 100px.

Свойства position: absolute и left: 50% указывают браузеру на необходимость сместить элемент на 50% влево. Но в этом случае на отметке 50% будет находиться левый край центрируемого элемента, а не его середина.

Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.

Следует помнить, что расчет положения элемента с абсолютным позиционированием осуществляется относительно любого из родительских элементов с установленным свойством “position: relative” или относительно страницы при их отсутствии.

Transform/translate

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

Проделаем это с красным квадратом из второго примера (смотри выше).

Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50%, появляются и два новых CSS-свойства.

Устанавливая верхний внешний отступ равным 50%: margin-top: 50%, мы смещаем верхний край элемента к центру. Но, аналогично предыдующему примеру, в центре по вертикали оказывается верхний край элемента, а не его середина.

Вот почему нам нужно еще одно свойство, которое называется transform

С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование. Но в данном случае нас интересует именно смещение (translate).

Создаем для центрируемого элемента свойство transform: translate(-50%, -50%), и…

Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.

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

Flexbox

Flexbox — одна из популярных моделей позиционирования и выравнивания элементов на странице.

Если Вы не знакомы с flexbox, воспользуйтесь Flexbox Froggy — это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.

Для того, чтобы разместить элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:
1. HTML, body и родительский контейнер должны иметь высоту 100%,
2. для родителського контейнера нужно установить display: flex,
3. так же для родительского контейнера нужно установить align-items: center,
4. еще для родительского контейнера нужно установить justify-content: center.
Устанавливая display: flex, мы создаем flex-контейнер.

align-items: center определяет вертикальное выравнивание всех дочерних элементов по центру родительского.

justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении — горизонтальном.

Этот метод хорош тем, что отлично подходит для адаптивной верстки и не требует вычисления внешних отступов.

Спасибо за внимание.

Новые публикации

JavaScript: сохраняем страницу в pdf

Читать:
Как нарисовать машину bmw поэтапно