Justify content css

Свойство justify-content задает выравнивание элементов вдоль главной оси.

Применяется к: родительскому элементу для flex блоков.

См. все flexbox свойства: flex-direction, justify-content, align-items, flex-wrap, flex-flow, align-self, order, flex-basis, flex-grow, flex-shrink, flex.

Значения

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

Значение по умолчанию: flex-start.

Примеры

Пример . Значение flex-start

Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:

Результат выполнения кода:

Пример . Значение flex-end

В данном примере ось также направлена слева направо, но блоки прижаты к правой стороне, так как задано justify-content: flex-end:

Результат выполнения кода:

Пример . Значение center

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

Результат выполнения кода:

Пример . Значение space-between

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

Результат выполнения кода:

Пример . Значение space-around

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

Результат выполнения кода:

Пример . Значение center. Ось направлена вниз

Сменим направление главной оси, задав flex-direction: column:

Результат выполнения кода:

Пример . Значение space-between. Ось направлена вниз

Сейчас блоки распределятся равномерно по вертикали:

Результат выполнения кода:

code.mu

Начинаем погружение

Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex.

HTML

<div class="my-flex-container">  <div class="my-flex-block">item1</div>  <div class="my-flex-block">item2</div>  <div class="my-flex-block">item3</div> </div> 

CSS

.my-flex-container{  display: flex; } 

Основные свойства flex-контейнера. Главная и поперечная ось.

Одним из основных понятий в fleхbox являются оси.

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

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction.

flex-direction – направление главной оси

Доступные значения flex-direction:

• row (значение по умолчанию) : слева направо (в rtl справа налево)
• row-reverse: справа налево (в rtl слева направо)
• column: сверху вниз
• column-reverse: снизу вверх

justify-content – выравнивание по главной оси.

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

Доступные значения justify-content:

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

align-items – выравнивание по поперечной оси.

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

Доступные значения align-items:

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

СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо основных свойств flex-контейнера

Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

flexbox demo

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap.

Доступные значения flex-wrap:

• nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
• wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
• wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути,flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

CSS

/* т.е. ... */  .my-flex-block{  flex-direcrion:column;  flex-wrap: wrap; }  /* это то же самое, что ... */  .my-flex-block{  flex-flow: column wrap; } 

align-content

Существует также свойство align-content, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;)

Доступные значения align-content:

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

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо свойств многострочности в flex

flexbox demo

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0)

Пример 1:

• Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
• Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные

Пример 2:

• Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
• Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

CSS

/* т.е. ... */  .my-flex-block{  flex-grow:12;  flex-shrink:3;  flex basis: 30em; }  /* это то же самое, что ... */  .my-flex-block{  flex: 12 3 30em; } 

Демо для flex-grow, flex-shrink и flex-basis

flexbox demo

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items)

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

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order. Оно задается целым числом и по умолчанию равно 0.

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

<div class="my-flex-container">  <div class="my-flex-block" style="order: 5" >item1</div>  <div class="my-flex-block" style="order: 10">item2</div>  <div class="my-flex-block" style="order: 5" >item3</div>  <div class="my-flex-block" style="order: 5" >item4</div>  <div class="my-flex-block" style="order: 0" >item5</div> </div>   

  
 

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Демо для align-self и order

flexbox demo

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

.my-flex-container {  display: flex;  height: 300px; /* Или что угодно */ }  .my-flex-block {  width: 100px; /* Или что угодно */  height: 100px; /* Или что угодно */  margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ } 

Вещи, которые следует помнить

1. Не следует использовать flexbox там, где в этом нет необходимости.
2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580

В заключение

Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас. Одна из следующих статей будет посвящена конкретным примерам работы с flex-версткой. Подписывайтесь на новости 😉

html5.by

Синтаксис

/* Positional alignment */ justify-content: center; /* Pack items around the center */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from the end */ justify-content: flex-start; /* Pack flex items from the start */ justify-content: flex-end; /* Pack flex items from the end */ justify-content: left; /* Pack items from the left */ justify-content: right; /* Pack items from the right */  /* Baseline alignment */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline;  /* Distributed alignment */ justify-content: space-between; /* Distribute items evenly  The first item is flush with the start,  the last is flush with the end */ justify-content: space-around; /* Distribute items evenly  Items have a half-size space  on either end */ justify-content: space-evenly; /* Distribute items evenly  Items have equal space around them */ justify-content: stretch; /* Distribute items evenly  Stretch 'auto'-sized items to fit  the container */  /* Overflow alignment */ justify-content: safe center; justify-content: unsafe center;  /* Global values */ justify-content: inherit; justify-content: initial; justify-content: unset; 

Значения

• flex-start — Флексы прижаты к началу строки.
• flex-end — Флексы прижаты к концу строки.
• center — Флексы прижимаются по центру строки.
• space-between — Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера.
• space-around — Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

Примечание

• Safari до версии 9 поддерживает свойство -webkit-justify-content.

Примеры

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>justify-content</title>  <style>  section {  display: flex;  margin-bottom: 10px;  }  section > div {   border: 1px solid #ccc;  width: 100px;  height: 100px;  background: repeating-radial-gradient(circle at 50% 50%, #fff, #fff 25px, #f96 25px, #f96 50px);  }  .flex-start {  justify-content: flex-start;  }  .flex-end {  justify-content: flex-end;  }  .center {  justify-content: center;  }  .space-between {  justify-content: space-between;  }  .space-around {  justify-content: space-around;  }  </style>  </head>  <body>  <section class="flex-start">  <div></div><div></div><div></div>  </section>  <section class="flex-end">  <div></div><div></div><div></div>  </section>  <section class="center">  <div></div><div></div><div></div>  </section>  <section class="space-between">  <div></div><div></div><div></div>  </section>  <section class="space-around">  <div></div><div></div><div></div>  </section>  </body> </html> 

xsltdev.ru

Flexbox CSS — три основных свойства выравнивания элементов

В текущем уроке разберем три основных свойства Flexbox CSS — display | justify-content | align-items. При помощи их можно выравнивать flex-элементы по горизонтали и вертикали. 

See the Pen #1 Flexbox – display | justify-content | align-items by Denis (@Dwstroy) on CodePen.

Делаем площадку для тестирования свойств Flexbox

Для теории подготовим плацдарм, на котором буду рассматривать поведение flex-элементов. Для этого сделаю отдельную директорию (lesson) и создам в ней index файл.

<!DOCTYPE html>  <html lang="ru">  <head>   <meta charset="UTF-8">   <title>#1 Flexbox – display | justify-content | align-items</title>  </head>  <body>  

Блок с классом dws-wrapper, будет служить оберткой всего содержимого. В нем пропишем заголовок с темой урока «#1 Flexbox – display | justify-content | align-items».

Далее нам понадобится, блок, который будет выступать в качестве flex-контейнера, в нутрии его расположим flex-элементы. Используем UL в качестве контейнера, а списки LI в качестве элементов. В нутрии добавлю текст с порядковым номером элемента.

ul.flex-cont>li.flex-elem{elem-$}*6  

<ul class="flex-cont">   <li class="flex-elem">elem-1</li>   <li class="flex-elem">elem-2</li>   <li class="flex-elem">elem-3</li>   <li class="flex-elem">elem-4</li>   <li class="flex-elem">elem-5</li>   <li class="flex-elem">elem-6</li>  </ul>  

Для более понятной визуализации придам оформление данным элементам.

Создам, и подключим два файла, в первом описываем стандартное оформление элементов, во втором прописываем правила по flexbox и все это расположим в новой директории css.

<link rel="stylesheet" type="text/css" href="css/style.css">  <link rel="stylesheet" type="text/css" href="css/flexbox.css">  

Когда речь идет о flexbox, вы визуально должны представлять перед собой какой-то контейнер. Что бы это было наглядней, UL представим в виде блока, где зададим для него базовый цвет, уберем маркировку списков и добавим внутренние отступы. Это будет будущей flex-контейнер.

ul {   background: #ccc;   list-style-type: none;   padding: 10px;  }  

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

li {   background-color: #18758d;   font-size: 20px;   color: #ffffff;   margin: 5px;   padding: 10px;  }  

.dws-wrapper {   margin-top: 100px;  font-family: Verdana, sans-serif;  }    h1 {   color: #114d5e;   font-size: 16px;   line-height: 25px;   }  h1 span {   color: #ffffff;   background: #074249;   padding: 3px 8px;  }  

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

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

Разбираем три основных свойства FLEXBOX

Свойство display

Первое свойство, с которым познакомимся это display, при помощи которого объявляем flex-контейнер.

<h1><span>display</span> (объявляем flexbox)</h1>  

Свойство display  применимо только для контейнера, и имеет два значения:

display: flex – делает flex-контейнер блочным элементом который занимает всю ширину экрана.

display: flex;  

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

display: inline-flex;  

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

.flex-cont {   display: flex;  }  

Обратите внимание, что когда объявили правило display: flex, все его дочерние элементы стали flex-элементами и приняли горизонтальное положение, выстраивавшиеся в ряд.  Такое ранее расположение мы достигали путем float: left к тому же, после последнего элемента нам приходилось сбрасывать обтекание, что бы фон блока не схлопывался.

.flex-elem {   float: left;  }  

<div style="clear: both;"></div>  

Теперь это мы делаем все одной записью display: flex, и нет проблем схлопыванием фона у контейнера.

Далее давайте разберем, горизонтальное выравнивание flex-элементов, но прежде немного о flex-контейнере и flex-элементах.

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

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

Свойство justify-content – (Выравнивание по горизонтали)

Рассмотрим выравнивание flex-элементов по горизонтали, для этого есть свойство justify-content, оно применимо только для контейнера, имеет пять значений.

justify-content: flex-start, значение по умолчанию, все элементы позиционируются в начале контейнера.

justify-content: flex-start;  

justify-content: flex-end, элементы позиционирует в конце контейнера.

justify-content: flex-end;  

justify-content: center, все элементы позиционирует по середине flex-контейнера.

justify-content: center;  

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

justify-content: space-between;  

justify-content: space-around, элементы позиционируются по горизонтали равномерно, распределяя между собой все свободное пространство.

justify-content: space-around;  

dwstroy.ru

Syntax

/* Pack flex items from the start */ justify-content: flex-start;  /* Pack items from the end */ justify-content: flex-end;  /* Pack items around the center */  justify-content: center;  /* Distribute items evenly The first item at the start, the last at the end */ justify-content: space-between;  /* Distribute items evenly Items have equal space around them */ justify-content: space-around;  /* Distribute items evenly Items have a half-size space on either end */ justify-content: space-evenly;  /* Global values */ justify-content: inherit; justify-content: initial; justify-content: unset; 

Values

flex-start

The flex items are packed starting from the main-start. Margins of the first flex item is flushed with the main-start edge of the line and each following flex item is flushed with the preceding.

flex-end

The flex items are packed starting from the main-end. The margin edge of the last flex item is flushed with the main-end edge of the line and each preceding flex item is flushed with the following.

center

The flex items are packed toward the center of the line. The flex items are flushed with each other and aligned in the center of the line. Space between the main-start edge of the line and first item and between main-end and the last item of the line is the same.

space-between

Flex items are evenly distributed along the line. The spacing is done such as the space between two adjacent items is the same. Main-start edge and main-end edge are flushed with respectively first and last flex item edges.

space-around

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

Formal syntax

flex-start | flex-end | center | space-between | space-around

Examples

HTML Content

<div id="container">  <p>justify-content: flex-start</p>  <div id="flex-start">  <div></div>  <div></div>  <div></div>  </div>   <p>justify-content: flex-end</p>  <div id="flex-end">  <div></div>  <div></div>  <div></div>  </div>   <p>justify-content: center</p>  <div id="center">  <div></div>  <div></div>  <div></div>  </div>   <p>justify-content: space-between</p>  <div id="space-between">  <div></div>  <div></div>  <div></div>  </div>   <p>justify-content: space-around</p>  <div id="space-around">  <div></div>  <div></div>  <div></div>  </div>  <p>justify-content: space-evenly</p>  <div id="space-evenly">  <div></div>  <div></div>  <div></div>  </div> </div> 

CSS

#container > div {  display: flex;  font-family: "Courier New", "Lucida Console", monospace; }  #container > div > div {  width: 50px;  height: 50px;  background: linear-gradient(-45deg, #788cff, #b4c8ff); }  #flex-start {  justify-content: flex-start; }  #center {  justify-content: center; }  #flex-end {  justify-content: flex-end; }  #space-between {  justify-content: space-between; }  #space-around {  justify-content: space-around; }  #space-evenly {  justify-content: space-evenly; } 

Results in:

Specifications

Specification	Status	Comment
CSS Flexible Box Layout Module The definition of ‘justify-content’ in that specification.	Candidate Recommendation	Initial definition
CSS Box Alignment Module The definition of ‘justify-content’ in that specification.	Working Draft	Initial definition

Browser compatibility

[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

[2] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] Older versions of the spec treat absolute positioned children as though they are a 0 by 0 flex item. Later spec versions take them out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

docs1.w3cub.com

Синтаксис

/* Positional alignment */ justify-content: center; /* Pack items around the center */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from the end */ justify-content: flex-start; /* Pack flex items from the start */ justify-content: flex-end; /* Pack flex items from the end */ justify-content: left; /* Pack items from the left */ justify-content: right; /* Pack items from the right */  /* Baseline alignment */ /* justify-content does not take baseline values */  /* Normal alignment */ align-content: normal;  /* Distributed alignment */ justify-content: space-between; /* Distribute items evenly  The first item is flush with the start,  the last is flush with the end */ justify-content: space-around; /* Distribute items evenly  Items have a half-size space  on either end */ justify-content: space-evenly; /* Distribute items evenly  Items have equal space around them */ justify-content: stretch; /* Distribute items evenly  Stretch 'auto'-sized items to fit  the container */  /* Overflow alignment */ justify-content: safe center; justify-content: unsafe center;  /* Global values */ justify-content: inherit; justify-content: initial; justify-content: unset; 

Значения

start

Элементы упаковываются заподлицо друг к другу к началу края контейнера выравнивания на главной оси.

end

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

flex-start

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

flex-end

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

center

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

left

Элементы упаковываются друг за друга в направлении к левому краю контейнера выравнивания. Если ось свойства не параллельна оси inline, это значение ведет себя как start .

right

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

normal

Элементы упакованы в позицию по умолчанию, как если бы не было задано значение justify-content .

baseline
first baseline
last baseline

Определяет участие в выравнивании по первой или последней базовой линии: выравнивает базовую линию выравнивания первой или последней базовой линии коробки с соответствующей базовой линией в общем первом или последнем базовом наборе всех ящиков в своей группе совместного использования базовой линии.
Исходное выравнивание для first baseline start , для last baseline — end .

space-between

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

space-around

Элементы равномерно распределены внутри контейнера выравнивания вдоль основной оси. Расстояние между каждой парой смежных элементов одинаково. Пустое пространство перед первым и после последнего элемента равно половине пространства между каждой парой смежных элементов.

space-evenly

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

stretch

Если объединенный размер элементов меньше размера контейнера выравнивания, любые объекты с auto определением имеют одинаковый размер (не пропорционально), сохраняя при этом ограничения, налагаемые max-height / max-width (или эквивалентной функциональностью ), так что комбинированный размер точно заполняет контейнер выравнивания вдоль основной оси.

safe

Если размер элемента переполняет контейнер выравнивания, элемент выравнивается, как если бы режим выравнивания start .

unsafe

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

Формальный синтаксис

flex-start | flex-end | center | space-between | space-around | space-evenly

пример

Содержание CSS

#container {  display: flex;  justify-content: space-between; /* Can be changed in the live sample */ }  #container > div {  width: 100px;  height: 100px;  background: linear-gradient(-45deg, #788cff, #b4c8ff); } 

результат

code-examples.net

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

11.0+		28.0+	29.0+	17.0+	9.0+

Описание

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

Примечание: для выравнивания flex-элементов по вертикали используйте свойство align-items.

Значение по умолчанию:	flex-start
Применяется:	к flex-контейнерам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.justifyContent=»space-between»;

Синтаксис

justify-content: flex-start|flex-end|center|space-between|space-around;

Значения свойства

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

Пример

puzzleweb.ru