Свойство 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
: блоки выровнены по их baselinestretch
(значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются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-блок выравнен по baselinestretch
(значение по умолчанию) : 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; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ }
Вещи, которые следует помнить
- Не следует использовать flexbox там, где в этом нет необходимости.
- Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
- Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
- Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
- Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
- 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