Justify content


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-контейнер блочным элементом который занимает всю ширину экрана.


Делает flex-контейнер блочным элементом

display: flex;  

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

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-элементов. Когда задаем свойства для контейнера, тем самым мы задаем какое-то поведение всех его дочерних элементов. В тоже время, когда задаем свойство для элементов, это подразумевается правило для конкретного элемента или для какой-то группы.

Все свойства flexbox

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

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

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

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


flex-start, значение по умолчанию

justify-content: flex-start;  

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

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

justify-content: flex-end;  

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

center, все элементы позиционирует по середине

justify-content: center;  

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

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

justify-content: space-between;  

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


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

Syntax

/* 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; 

Values

start
The items are packed flush to each other toward the start edge of the alignment container in the main axis.
end
The items are packed flush to each other toward the end edge of the alignment container in the main axis.
flex-start
The items are packed flush to each other toward the edge of the alignment container depending on the flex container’s main-start side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
flex-end
The items are packed flush to each other toward the edge of the alignment container depending on the flex container’s main-end side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
center
The items are packed flush to each other toward the center of the alignment container along the main axis.
left
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
right
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
normal
The items are packed in their default position as if no justify-content value was set. This value behaves as stretch in grid and flex containers.
baseline
first baseline

last baseline
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.
space-between
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
space-around
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
space-evenly
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
stretch
If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
safe
Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
unsafe
Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

Formal syntax

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

where
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

Example

CSS content

#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); } 

Result

Specifications

Specification Status Comment
CSS Box Alignment Module Level 3
The definition of ‘justify-content’ in that specification.
Working Draft Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values.
CSS Flexible Box Layout Module
The definition of ‘justify-content’ in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Support in Flex layout

Support in Grid layout

developer.mozilla.org

Flexbox так и напрашивается на то, чтобы создавать по нему визуальные шпаргалки. Сегодня мы предлагаем вам перевод статьи Скотта Домеса «Как работает Flexbox – в больших, ярких анимированных гифках», своего рода наглядное пособие.

Justify content

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

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

Идея, в принципе, неплохая. Но давайте посмотрим, как это реализуется на практике. В этой статье мы рассмотрим 5 основных свойств Flexbox. Мы опишем, для чего они нужны, как вы можете их использовать, и к каким результатам они в итоге приводят.

Свойство № 1: Display: Flex

Вот наша интернет-страница в качестве примера:
Justify content

У вас есть четыре разноцветных блока различных размеров в сером контейнере. На данный момент для каждого блока по умолчанию определено display: block. Каждый квадрат таким образом занимает всю ширину своей линии.

Чтобы начать работу с Flexbox, вам надо превратить свой контейнер в flex-контейнер. Это делается следующим образом:

#container {  display: flex; }

Justify content
На первый взгляд изменения незначительны —  ваши блоки отображаются теперь в инлайновом виде, только и всего. Между делом вы сделали большой шаг. Вы создали для своих блоков так называемый flex-контекст.

Теперь вы можете размещать их в этом контексте — это намного проще, чем при работе с традиционным CSS.

Свойство № 2: Flex Direction

У flexbox-контейнера есть две оси: главная ось и перпендикулярная ось, которые по умолчанию выглядят следующим образом:
Justify content

По умолчанию flex-элементы выстраиваются вдоль главной оси, слева направо. Поэтому ваши квадраты по умолчанию будут располагаться в горизонтальный ряд, как только вы примените display: flex. Flex-direction, однако, позволяет вращать главную ось.

#container {  display: flex;  flex-direction: column; }

Justify content

Следует подчеркнуть: flex-direction: column не располагает квадраты на перпендикулярной оси вместо главной оси. Это свойство меняет направление самой главной оси из горизонтального в вертикальное.

У flex-direction есть и другие значения: row-reverse и column-reverse.
Justify content

Свойство № 3: Justify Content

Justify Content задаёт выравнивание элементов по главной оси.

Здесь различие главной и перпендикулярной осей следует рассмотреть подробнее. Сначала вернемся к flex-direction: row.

#container {  display: flex;  flex-direction: row;  justify-content: flex-start; }

У Justify Content есть пять значений:

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around

Justify content

Space-around и space-between наименее интуитивны. Space-between выравнивает элементы так, чтобы они располагались на одинаковом расстоянии относительно друг друга, но не относительно контейнера.

Space-around задает одинаковый отступ вокруг элемента со всех сторон. Это означает, что пространство между крайними квадратами и контейнером вдвое меньше, чем пространство между двумя квадратами (все отступы имеют одинаковую величину и не накладываются друг на друга, соответственно, промежуток между квадратами получается двойной).

И напоследок: помните, что justify-content выравнивает элементы вдоль главной оси, а flex-direction меняет положение самой главной оси. Это будет важно, когда вы перейдете к…

Свойство № 4: Align Items

Если вы освоили justify-content, align-items не вызовет у вас затруднений.

В то время как justify-content применяется для главной оси, align-items задаёт выравнивание элементов по перпендикулярной оси.

Justify content

Зададим для flex-direction изначальное значение row, чтобы оси выглядели следующим образом.

Затем перейдем к командам align-items.

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

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

Следующие две несколько отличаются.

При заданном значении stretch элементы занимают всё свободное пространство по перпендикулярной оси. Если задано baseline, основания тегов абзаца выравниваются.

Justify content

(Для align-items важно следующее: при значении stretch надо задать высоту квадратов автоматически, иначе она будет переопределять ширину.)

Что касается baseline, имейте в виду: если вы убираете теги абзаца, то будут выравниваться основания квадратов, как в примере:

Justify content

Чтобы лучше продемонстрировать функционирование главной и перпендикулярной осей, скомбинируем justify-content и align-items и посмотрим, как значение center влияет на каждую из команд flex-direction:

Justify content

При row квадраты выравниваются вдоль горизонтальной главной оси. При column они располагаются вдоль вертикальной главной оси.

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

Свойство № 5: Align Self

Align Self позволяет вручную управлять выравниванием одного конкретного элемента.

Это свойство аннулирует значения align-items для выбранного квадрата. Все свойства — те же, но по умолчанию выставляется auto, при котором значения аналогичны align-items контейнера.

#container {  align-items: flex-start; } .square#one {  align-self: center; } // Only this square will be centered.

Давайте посмотрим, как это будет выглядеть. Вы применяете align-self к двум квадратам, а для остальных применяете align-items: center и flex-direction: row.

Justify content

Заключение

Хотя мы только поверхностно затронули работу с Flexbox, рассмотренные команды позволят вам осуществлять большинство базовых выравниваний и вертикальное выравнивание элементов.

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

habr.com

Значения

Значение Описание
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

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

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

Синтаксис

/* 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 baselineend .
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

Синтаксис

/* 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


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.