Flex space between: How to set space between the flexbox ?

Всё, что нужно знать о выравнивании во Flexbox / Хабр

Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk.

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

В первой статье этого цикла я рассказала, что происходит при объявлении свойства display: flex для элемента. Сейчас рассмотрим свойства выравнивания и как они работают с Flexbox. Если вы когда-либо приходили в замешательство, применить align или justify, надеюсь, эта статья многое прояснит!

История выравнивания во Flexbox

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

Свойства выравнивания теперь полностью определены в спецификации Box Alignment. Она детализирует, как работает выравнивание в различных макетах. Это означает, что в CSS Grid можно использовать те же свойства, что и в Flexbox — а в будущем в других макетах тоже. Поэтому любая новая функция выравнивания Flexbox будет подробно описана в спецификации Box Alignment, а не в следующей версии Flexbox.

Свойства

Многим трудно запомнить, следует ли использовать свойства, которые начинаются с align- или с justify-. Важно помнить следующее:

• justify- выполняет выравнивание по главной оси в том же направлении, что и flex-direction;
• align- выполняет выравнивание по оси поперёк направлению flex-direction.

Здесь действительно помогает мышление с точки зрения главной и поперечной осей, а не горизонтальной и вертикальной. Не имеет значения, как физически направлена ось.

Выравнивание главной оси с помощью

justify-content Начнём с выравнивания по главной оси. Оно осуществляется с помощью свойства justify-content. Данное свойство обрабатывает все элементы как группу и управляет распределением пространства между ними.

Изначальное значение justify-content равняется flex-start. Вот почему при объявлении display: flex все элементы flex выстраиваются в начале строки. В письменности слева направо элементы группируются слева.

Обратите внимание, что свойство justify-content производит видимый эффект только при наличии свободного места

. Поэтому если у вас набор элементов занимает всё пространство на главной оси, justify-content ничего не даст.

Если указать для justify-content значение flex-end, то все элементы переместятся в конец строки. Свободное место теперь находится в начале.

С этим пространством можно делать и другие вещи. Например, распределить его между нашими элементами, используя justify-content: space-between. В этом случае первый и последний элемент разместятся на концах контейнера, а всё пространство поровну поделится между элементами.

Мы можем распределить пространство с помощью justify-content: space-around. В этом случае доступное пространство делится на равные части и помещается с каждой стороны элемента.

Новое значение justify-content можно найти в спецификации Box Alignment; оно не указано в спецификации Flexbox. Это значение

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

Вы можете поиграться со всеми значениями в демо.

Значения точно так же работают по вертикали, то есть если flex-direction применяется для column. Правда, у вас в столбце может не оказаться свободного места для распределения, если не добавить высоту или block-size контейнера, как в этом демо.

Выравнивание по осям с помощью

align-content Если в контейнере несколько осей и указано flex-wrap: wrap, то можно использовать align-content для выравнивания строк на поперечной оси. Но требуется дополнительное пространство. В этой демонстрации поперечная ось работает в направлении колонки, и я указала высоту контейнера

60vh. Поскольку это больше, чем необходимо для отображения всех элементов, то появляется свободное пространство по вертикали.

Затем я могу применить align-content с любым из значений.

Если в качестве flex-direction указано column, то align-content работает как в следующем примере.

Как и в случае с justify-content, мы работаем с группой строк и распределяем свободное пространство.

Свойство по

place-content В спецификации Box Alignment можно найти свойство place-content. Использование этого свойства означает, что вы одновременно устанавливаете justify-content и align-content. Первое значение — для align-content, второе для justify-content. Если задано только одно значение, то оно применяется к обоим свойствам:

.container {
    place-content: space-between stretch;
}

Соответствует этому:

.container {
    align-content: space-between; 
    justify-content: stretch;
}

А такой код:

.container {
    place-content: space-between;
}

Равноценен следующему:

.container {
    align-content: space-between; 
    justify-content: space-between;
}

Выравнивание по осям с помощью

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

Как вариант, её можно определить свойством height в контейнере:

Почему элементы растягиваются до размера самого высокого элемента — это потому что начальным значением параметра

align-items является stretch. Элементы растягиваются по поперечной оси до размера контейнера в этом направлении.

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

Кроме начального значения stretch, можно присвоить элементам align-items значение flex-start, в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.

Значение flex-end перемещает их в конец контейнера по поперечной оси.

Если вы используете значение center, то элементы центрируются относительно друг друга:

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

Все эти варианты можно попробовать в демо.

Индивидуальное выравнивание с помощью

align-self Свойство align-items задаёт выравнивание всех элементов одновременно. В действительности оно устанавливает значения align-self для всех элементов группы. Можно также использовать свойство align-self для любого отдельного элемента, чтобы выровнять его внутри строки и относительно других элементов.

В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.

Почему нет

justify-self? Часто возникает вопрос, почему невозможно выровнять один элемент или группу элементов по главной оси. Почему во Flexbox нет свойства -self для выравнивания по главной оси? Если вы представите justify-content и align-content как способ распределения пространства, то ответ становится более очевидным. Мы имеем дело с элементами как с группой и размещаем свободное пространство определённым образом: либо в начале, либо в конце группы, либо между элементами.

Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками. Здесь тоже мы берём группу дорожек — и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.

Использование автоматических полей на основной оси

Если вы когда-нибудь центрировали блок в CSS (например, враппер для контента главной страницы, установив поля слева и справа в auto), то у вас уже есть некоторый опыт работы с автоматическими полями. Значение auto для полей заполняет максимальное пространство в установленном направлении. Для центрирования блока мы устанавливаем и левое, и правое поля в auto: каждое из них пытается занять как можно больше места, и поэтому помещает наш блок в центр.

Автоматические поля очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере показан типичный случай. Есть панель навигации, элементы отображаются в виде строки и используют начальное значение justify-content: start. Я хочу, чтобы последний пункт отображался отдельно от других в конце строки — при условии, что в строке достаточно места для этого.

Берём этот элемент и указываем для свойства margin-left значение auto. Это значит, что поле пытается получить как можно больше места слева от элемента, то есть элемент выталкивается к правой границе.

Если вы используете автоматические поля на главной оси, то justify-content перестанет действовать, так как автоматические поля займут всё пространство, которое в противном случае распределялось бы с помощью justify-content.

Запасное выравнивание

Для каждого метода выравнивания описан запасной вариант — что произойдёт, если заданное выравнивание невозможно. Например, если у вас есть только один элемент в контейнере, а вы указали justify-content: space-between, что должно произойти? В этом случае применяется запасное выравнивание flex-start — один элемент будет выровнен по началу контейнера. В случае justify-content: space-around используется запасное выравнивание center.

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

Безопасное и небезопасное выравнивание

Недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием ключевых слов safe и unsafe.

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

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: unsafe center;
}
.item:last-child {
    width: 200px;
}

Безопасное выравнивание предотвращает потерю данных, перемещая переполнение на другую сторону.

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: safe center;
}
.item:last-child {
    width: 200px;
}

Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.

Заключение

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

• justify- для основных осей, а align- для поперечных;
• для align-content и justify-content требуется свободное пространство;
• свойства align-content и justify-content применяются к элементам в группе, распределяя пространство между ними. Нельзя указывать выравнивание отдельного элемента, потому что свойство -self отсутствует;
• если хотите выровнять один элемент или разбить группу по основной оси, используйте автоматические поля;
• align-items устанавливает одинаковые свойства align-self для всей группы. Используйте align-self для дочернего элемента группы, чтобы установить ему значение индивидуально.

justify-content — CSS — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. На практике
   1. Алёна Батицкая советует

Кратко

Скопировано

Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.

При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.

Пример

Скопировано

Код ниже заставит флекс-элементы распределиться по всей ширине родителя, разделив свободное пространство поровну.

.container {  display: flex;  justify-content: space-between;}
          .container {
  display: flex;
  justify-content: space-between;
}

Как понять

Скопировано

Это свойство определяет, как распределяется свободное пространство между элементами вдоль главной оси (для флексбоксов), и по горизонтали (для гридов).

Как пишется

Скопировано

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

Если основная ось идёт горизонтально, то для сайта с направлением письма слева направо (LTR) значение start прижмёт элементы к левому краю, а значение end прижмёт элементы к правому краю. Для сайтов с направлением письма справа налево (RTL) элементы будут прижиматься к противоположным краям для аналогичных значений.

В случае, если указано свойство flex-direction: column, то значения left и right срабатывают как start.

📝

Полный список свойств флексбоксов можно посмотреть в гайде по flexbox. А свойства гридов описаны в гайде по grid

Поддержка в браузерах

• Chrome 57, Поддерживается 57
• Edge 79, Поддерживается 79
• Firefox 81, Поддерживается 81
• Safari 9, Поддерживается 9

О Baseline

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Если внутри флекс-контейнера всего два элемента, то удобно использовать justify-content: space-between, чтобы прижать их к противоположным краям родителя. Это имитирует поведение свойства float, но без последствий.

Оценка материала

Если вы нашли ошибку, отправьте нам пулреквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

grid-template-rows

ctrl + alt + ←

Следующий материал

→

justify-items

ctrl + alt + →

выравнивание контента | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство justify-content является подсвойством модуля Flexible Box Layout.

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

Свойство justify-content принимает пять разных значений:

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

Следующий рисунок помогает понять, что на самом деле делает свойство justify-content :

Синтаксис

 justify-content: flex-start | гибкий конец | центр | пространство между | пространство вокруг | пространственно-равномерно
. flex-элемент {
  выравнивание содержимого: по центру;
} 

Demo

Следующая демонстрация показывает, как ведут себя flex-элементы в зависимости от значения justify-content :

• Красный список установлен на flex-start
• Желтый установлен на flex-end 9 0006
• Синий установлен на центр
• Зеленый установлен на пробел-между
• Розовый установлен на пробел-вокруг
• Светло-зеленый настроен на пробел-равномерно 900 20

Поддержка браузера

Рабочий стол

901 00

Chrome	Firefox	IE	Edge	Safari
21*	28	11	12	6.1*

Мобильный телефон/планшет

90 135 114

Android Chrome	Android Firefox	Android	iOS Safari
113	4. 4	7.0-7.1*

Браузер Blackberry 10+ поддерживает новый синтаксис.

В нашем последнем обновлении от декабря 2018 г. justify-content: space-evenly; получает поддержку. На него есть рабочая спецификация проекта.

Рабочий стол

Chrome	Firefox	IE	Edge	Safari
60	52	№	79	11

Мобильный телефон/планшет

Android Chrome	Android Firefox	Android	iOS Safari
114	113	114	11.0-11.2

Для получения дополнительной информации о том, как смешивать синтаксис для получения наилучшей поддержки браузера, обратитесь к нашей статье «Использование Flexbox».

Дополнительная информация

• Модуль CSS Flexible Box Layout Уровень 1
• Как использовать сетку CSS для выравнивания содержимого и элементов
• Полное руководство по Flexbox 30 Статья на 5 апреля 2018 г.

  Быстрый способ запомнить разницу между `justify-content` и `align-items`

  Статья на 24 июня 2019 г.

  Создание расписания конференции с помощью CSS Grid

  Статья на 20 июня 2018 г.

  Центрирование: самый новый и самый крутой способ против самого старого и самого крутого способа

  Статья на 7 декабря 2022 г.

  Управление макетом на многонаправленном веб-сайте

  Статья на 4 января 2018 г.

  Время веселья с элементами сетки размеров

  Статья на 3 июня 2022 г.

  Пожалуйста, дайте мне немного места

  Альманах на 28 июля 2021 г.

  выравнивание содержимого

  .element { align-content: space-around; }

  выравнивание содержимого flexbox

  Альманах на 28 сентября 2022 г.

  выравнивание элементов

  .element { align-items: flex-start; } Альманах на 27 декабря 2018 г.

  выровнять себя

  .box { align-self: flex-end; } Альманах на 15 октября 2021 г.

  отображать

  .element { display: inline-block; }

  дисплей

  Альманах на 4 августа 2021 г.

  flex-направление

  .element { flex-direction: column-reverse; } Альманах на 4 августа 2021 г.

  гибкий поток

  .element { flex-flow: перенос строк; } Альманах на 30 сентября 2022 г.

  гибкая упаковка

  .example { flex-wrap: wrap; } Альманах на 2 марта 2021 г.

  выравнивание-элементы

  .element { выравнивание элементов: центр; } Альманах на 28 апреля 2022 г.

  оправдываться

  .element { justify-self: stretch; } Альманах на 17 мая 2021 г.

  место-контент

  Альманах на 13 мая 2021 г.

  место-предметы

  .element { элементы места: центр; } Альманах на 4 марта 2021 г.

  место для себя

  Как установить пространство между элементами Flexbox

  Flexbox — это одномерный макет, который размещает элементы в одном измерении за раз (либо в виде строки, либо в виде столбца).

  Основное назначение Flexbox Layout — распределить пространство между элементами контейнера. Это работает даже в тех случаях, когда размер элемента неизвестен или динамичен.

  Вы можете легко установить расстояние между элементами flexbox, используя свойство CSS justify-content. В этом фрагменте мы покажем, как это сделать.

  • Создайте три элемента
    с именем класса "flex-items":

   
  
    <голова>
      
    
    <тело>
       
  Пробел между флексбоксами
   
       
  выравнивание содержимого: вокруг пробела 
   
      <дел>
        <дел>1
        <дел>2
        <дел>3