Как расположить по центру css flex

Центрирование в CSS с помощью Flexbox

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

Ниже приведено очень простое руководство по центрированию элементов с использованием Flexbox.

Горизонтальное центрирование

Начнем с div, который содержит два абзаца, которые мы хотим центрировать по горизонтали на одной оси. Это так же просто, как использование свойства justify-content со значением центра на контейнере:

Вертикальное центрирование

Flexbox действительно мощный инструмент, когда нам также нужно центрировать элементы по вертикали. Вот наш пример, но с гибкими элементами также центрированы по вертикали:

Вертикальное центрирование на всей странице

Если вы хотите поместить элемент по центру страницы, это может быть немного сложнее, потому что элементы не имеющие высоты и ширины будут располагаться только по вертикали в соответствии с высотой их контейнера. Это означает, что сам контейнер должен быть такой же высоты, как и сама страница. Это достаточно просто сделать, используя 100vh — 100% высоты окна просмотра.

Метод позиционирования элементов Flexbox

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

Внутри flex-контейнера создаются две оси: главная и перпендикулярная ей поперечная. Сначала flex-элементы выстраиваются по главной оси, а потом уже по поперечной.

Свойства flex-контейнера

  • row – слева направо (по умолчанию);
  • row-reverse – справа налево;
  • column – сверху вниз;
  • column-reverse – снизу вверх.
  • nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
  • wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
  • wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.
  • flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу главной оси;
  • center – flex-элементы выравниваются по центру главной оси;
  • space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу;
  • space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.
  • flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу поперечной оси;
  • center – flex-элементы выравниваются по центру поперечной оси;
  • baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
  • stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.
  • flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – строки flex-элементов прижимаются к концу поперечной оси;
  • center – fстроки flex-элементов выравниваются по центру поперечной оси;
  • space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя — к концу;
  • space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками.
  • stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

Это свойство не работает для однострочного flex-контейнера.

Свойства flex-элементов

В спецификации CSS Flexible Box Layout Module Level 1 приведена наглядная диаграмма для трех flex-элементов со значениями flex-grow 1, 1, 2 соответственно:

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

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

Чтобы прижать заголовок сайта влево, а номер телефона вправо, то заголовку надо задать flex: 1.

Если же по какой-то причине тянуть заголовок на всю ширину нельзя, то блоку с номером телефона надо задать margin-left: auto.

Для наглядности блокам добавлены пунктирные границы.

2. Сжатие блоков с длинными словами

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

Теперь в описании услуги появляется длинное слово.

Красной границей обозначена ширина смартфона, и если переполнение скрыто (overflow: hidden), то кнопку "Оставить заявку" никто не увидит и заказать услугу не сможет.

Дело в том, что минимальная ширина (min-width) блока description по умолчанию имеет значение auto, что в данном случае равняется ширине слова "пенополистиролбетонных". Значит, flex-элемент не может быть уже, чем это слово.

Решение данной проблемы – указать для flex-элемента нулевую минимальную ширину (min-width: 0). Теперь элемент может быть уже, чем его содержимое. А длинное слово можно просто перенести.

3. Гарантированная ширина

Кнопка "Оставить заявку" по ширине совсем не 120px, как было указано в стилях. Дело в том, что по умолчанию flex-элемент сжимается, если места недостаточно.

Следующие три комбинации разработчики Flexbox посчитали наиболее часто используемыми и присвоили им ключевые слова:

flex: 0 1 auto Элемент сжимается, если места не хватает, но не тянется шире, чем ему надо.
Соответствует flex: initial и является значением по умолчанию. flex: 1 1 auto Элемент сжимается, если места не хватает и тянется для заполнения всего доступного пространства. Соответствует flex: auto. flex: 0 0 auto Элемент не меняет свои размеры. Соответствует flex: none.

Итак, чтобы ширина кнопки "Оставить заявку" равнялась именно 120px, надо ей добавить flex: none.

Вертикальное и горизонтальное центрирование всего и вся в CSS Flexbox

Stas Bagretsov

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

Эта статья одна из завершающих из цикла переводов про CSS Flexbox. Скоро все они будут скомпонованы в один большой, понятный и объёмный гайд по изучению CSS Flexbox.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

В примерах с навигацией используется пример кода отсюда.

Разоч а ровались в попытках использования CSS для выравнивания по центру с div ’ами, изображениями и текстом?

Вообще, выравнивание горизонтально и вертикально в CSS всегда было таким, каким-то странным и зачастую не таким, как вообще задумывалось. Я успел применить буквально все хаки в этом направлении за последние несколько лет.

К сожалению, во флотах нет опции center , только left и right . Ну и конечно же там нет опции vertical-center .

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

Вообще, во Flexbox стало очень легко отцентровывать текст, изображения и div ’ы. Но это не означает того, что это единственный способ центрировать контент.

Вы наверное делали как я и искали на пространствах сети лучшие способы горизонтальной и вертикальной центровки в HTML.

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

Как отцентровать текст в CSS с помощью text-align

Если вам нужно отцентровать текст c CSS внутри элемента, например div ’а, заголовка или параграфа, вы можете смело использовать свойство text-align .

Выставление text-align на center является самым распространенным способом горизонтального выравнивания текста с помощью CSS. Этот подход не ограничивается только текстом, он может использоваться для центровки почти всех элементов потомков, которые меньше родительского контейнера.

Вот три вещи, которые нужно обязательно знать правильного использования text-align , чтобы горизонтально отцентровать текст или элементы потомки.

Текст или элемент центрирования должен быть обёрнут или находится в родительском элементе, который самой собой шире.

Родительский элемент должен иметь text-align: center .

Если вы центрируете элемент, то его свойство display должно быть с inline-block .

Если у вас несколько дочерних элементов, то они все дружно будут отцентрированы внутри родительского контейнера.

text-align имеет несколько свойств:

center : текст отцентрован.

left : текст выровнен по левой стороне контейнера.

right : текст выровнен по правой стороне контейнера.

justify : текст выстраивается ровно по левой и правой граням контейнера, за исключением последней строки.

justify-all : выравнивает последнюю строку.

start : тоже самое, что и left , если написание идёт слева направо. Но будет right , если написание справа налево.

end : start, только наоборот.

match-parent : тоже, что и inherit , но только start и end высчитываются с учетом родительского элемента.

Используйте эти свойства для выравнивания текста внутри родительского элемента или div ’а врапера. Тут всё обыденно и просто.

Выравниваем элементы горизонтально с text-align

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

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

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

Вы можете применить text-align: center для врапера панели навигации. А внешний “родительский” элемент, то есть ul , должен быть с dispay: inline-block .

Ну, а чтобы элементы меню выглядели выровненными, поставим им float: left .

И теперь у вас горизонтально выровненное меню.

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

В наше время у нас уже есть кое-что получше, а именно CSS Flexbox.

CSS Flexbox

Flexbox был добавлен в стандарты CSS несколько лет назад, в основном для того, чтобы разобраться с распределением места и выравниванием элементов. По сути, это синтаксис одномерной раскладки.

А в купе с более новым CSS Grid, веб-разработчики получают куда более мощный инструмент для разработки сложных шаблонов, которые в последствии будет куда проще поддерживать.

Мы говорим, что это одномерный контроль раскладки, но на самом деле у него есть оси x и y. Как вы увидите далее, выравнивание в каждом случае будет происходить с разными свойствами.

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

Центрируем текст горизонтально и вертикально, используя CSS для выравнивания по центру

Центрирование текста по абсолютному центру традиционно было было одной из самых распространенных проблем с костыльными решениями, которые решил Flexbox. В прошлом было неимоверно много хаков и костылей, таких как использование display: table и т.п. Как я и упоминал ранее, Flexbox сделал этот сложный и неестественный процесс куда более проще.

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

Это div с элементами заголовков. Мы будем использовать CSS не только для горизонтального центрирования, но и для вертикального. Вы можете вставить любые элементы потомки, такие как <p> или <span> . Вообще очень крутая штука в CSS Flexbox в том, что его инструментарий может центрировать вертикально и горизонтально буквально всё, что только можно!

Тут div будет занимать всю доступную ширину и будет минимум в 200px высотой. Это даст нам вертикальные маргины для использования в этом примере.

Вся магия произойдет тогда, когда вы выставите display на flex . Когда display стоит на flex , вы можете использовать дополнительные flexbox свойства для управления уже самим макетом.

align-items и justify-content это важные свойства для абсолютного центрирования текста горизонтально и вертикально. Горизонтальное центрирование происходит с помощью justify-content , а вертикальное с align-items .

align-items может использоваться не только для центровки текста вертикально, но и любого дочернего элемента.

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

Горизонтальное центрирование div’ов с использованием CSS Flexbox

Flexbox делает центровку элементов простым и естественным процессом.

Поставьте родительскому элементу .navbar display:flex; . Выставите ширину, в этом примере я хочу, чтобы панель навигации растянулась по всему вьюпорту, то есть на 100%.

Чтобы выставить по центру дочерние элементы, поставьте justify-content: center для элемента родителя.

Чтобы сделать CSS более юзабельным, я разбил стили по разным селекторам:

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

Вертикальное центрирование div’ов с CSS Flexbox

Горизонтальное центрирование никогда не было самым сложным моментом.

Но что у нас с вертикальным центрированием? Ну или как бы мы применили CSS, что вертикально выровнять элементы?

Во многих случаях, это тот момент, при котором большинство разработчиков рвут на себе волосы.

Тут столько правил и костылей, которые нужно запомнить, а ведь всё равно что-нибудь да порушит всю раскладку.

Flexbox наконец-то исправил проблемы с вертикальным центрированием, выдав эту кейсу четкое и понятное правило для применения.

Как и с justify-content: center , которое выстраивает элементы потомки по центру оси x, flexbox align-items: center делает это по оси y.

В примере с меню в хедере, враппер навигационной панели отцентрирован вертикально.

Тут элемент хедер служит родителем для навигационной панели, и его ширина равна 100%, а min-height стоит на 80px.

Так как навигационная панель сама по себе меньше, чем 80px, то тут есть пустое место, с которым мы можем поиграться. Так мы можем сделать навигацию равноудаленной от вершины до низа хедера, добавив ему display: flex и align-items: center .

Абсолютное центрирование div’ов с использованием CSS Flexbox

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

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

Всё, что вам для этого нужно сделать, это добавить как justify-content: center и align-items: center , ну и flex-direction: column в css для <header> .

Вы можете применять эту комбинацию flexbox свойств для центровки любого элемента, а не только navbar . Изображения, div ’ы и т.п. Все они могут быть также абсолютно отцентрированы внутри родительского элемента.

Можете посмотреть на то, как я применил этот принцип на полноэкранном фоновом изображении.

Как отцентровать изображение в CSS с помощью text-align и Flexbox

Вообще, изображения могут быть выровнены с использованием свойств text-align и flexbox.

Вы можете применить text-align для элемента родителя изображения с right , left и center возможностями выравнивания.

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

Но тут всё ещё довольно проблематично сделать выравнивание без flexbox. Если вы примените абсолютное центрирование из флексов для контейнера изображения, то вы смело можете выставить картинку по центру обеих осей, ну или только одной, тут уже на ваш выбор.

Просто ради забавы, давайте выровняем изображение с использованием flexbox.

Те же самые правила, что и в примере выше.

Делаем родительский элемент display: flex , он должен быть больше или равным изображению по размерам, align-items и justify-content должны иметь center, а flex-direction выставлен на column .

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

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