justify-content в CSS


Содержание

Про CSS

Flexbox

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

UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.

Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

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

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

Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

Приготовим полигон для экспериментов:

Один родительский блок (желтый) и 5 дочерних.

Display: flex

И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

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

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

flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).

inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).

Flex-direction

Направление раскладки блоков управляется свойством flex-direction .

row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

row и row-reverse

column и column-reverse

Flex-wrap

В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

Возможные значения: можно задавать оба свойства или только какое-то одно. Например:

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse :

Order

Для управления порядком блоков служит свойство order .

Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

Justify-content

Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

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

Возможные значения justify-content :

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

flex-start и flex-end

Align-items

align-items отвечает за выравнивание по перпендикулярной оси.

Возможные значения align-items :

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

Align-self

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

Возможные значения align-self :

auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start — элемент выравнивается от начала перпендикулярной оси; flex-end — элемент выравнивается от конца перпендикулярной оси; center — элемент выравнивается по центру; baseline — элемент выравнивается по базовой линии; stretch — элемент растягивается, занимая все пространство по высоте.

Align-content

Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

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

Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

Элементы стоят столбиком, но не переносятся:

Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

Думаю, со временем заработает.

UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

CSS justify-content

The CSS justify-content property controls alignment of a box’s content along the main/inline axis within its content box.

The justify-content property aligns flex items along the main axis of the current line of the flex container. It defines how space is distributed between and around flex items.

The alignment is done after any flexible lengths and any auto margins have been resolved. Therefore, flex-grow will need to be 0 , otherwise the justify-content property will have no effect.

Although the justify-content property was created for flex containers (originally under a different name), its definition is currently being expanded to include block containers and grid containers.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

This property is currently being redefined so that it applies to block containers, flex containers, and grid containers.

Inherited? No Media Visual Computed Value Specified value Animatable No

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The justify-content property is defined in CSS Flexible Box Layout Module Level 1 (W3C Candidate Recommendation, 26 May 2020).
  • It is also being redefined in CSS Box Alignment Module Level 3 (W3C Working Draft).

About Flexbox

Flexbox refers to the Flexible Box Layout module introduced in CSS3. A is an element with either display: flex or display: inline-flex .

In the flex layout model, the children of a flex container can be laid out in any direction, and can «flex» their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

For more information on flex items, see the flex property.

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Вся документация по свойству flex находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

display

inline-flex
русский
english

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

Применяется ко: всем элементам.

flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

Applies to: all elements.

flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

flex-direction

row-reverse
column
column-reverse
русский
english

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

Илон Маск рекомендует:  Что такое код gettempfilename

Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

Applies to: flex containers.

row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

flex-wrap

nowrap
wrap-reverse
русский
english

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Applies to: flex containers.

Initial: nowrap.

nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

flex-flow

row nowrap
column-reverse
column wrap
row-reverse wrap-reverse
русский
english

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Applies to: flex containers.

Initial: row nowrap.

order

русский
english

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

Применяется к: flex элементам.

Значение по умолчанию: 0.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

Applies to: flex items.

Initial: 0.

justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly
русский
english

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Применяется к: flex контейнерам.

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

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

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

align-items

flex-start
flex-end
center
baseline
stretch
русский
english

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

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex containers.

Initial: stretch.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-self

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Применяется кo: flex элементам.

Значение по умолчанию: auto.

flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex items.

Initial: auto.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

Илон Маск рекомендует:  Передача параметров между страницами (location.search)

align-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch
русский
english

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

СSS3 Свойство justify-content

Пример

Выровнить гибкие элементы по центру контейнера:

Определение и использование

Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (по горизонтали).

Совет: Используйте свойство align-items выравнивать элементы по вертикали.

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

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

Свойство
justify-content 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

CSS Синтаксис

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

Значение Описание Воспроизвести
flex-start Значение по умолчанию. Элементы располагаются в начале контейнера Воспроизвести »
flex-end Элементы располагаются в конце контейнера Воспроизвести »
center Элементы расположены в центре контейнера Воспроизвести »
space-between Элементы позиционируются с пробелом между строками Воспроизвести »
space-around Элементы размещаются с пробелом до, между и после строк Воспроизвести »
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример

Выровнить гибкие элементы в начале контейнера (это значение по умолчанию):

Пример

Выровняйте гибкие элементы в конце контейнера:

Пример

Отображение гибких элементов с пробелом между строками:

Пример

Отображение гибких элементов с пробелами до, между и после строк:

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.

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

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

Display: Flex

Вот пример страницы:

У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

Flex Direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

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

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

CSS3 justify-content Property

Description

The justify-content CSS property specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.

The following table summarizes the usages context and the version history of this property.

Default value: flex-start
Applies to: Flex containers
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

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

The example below shows the justify-content property in action.

Example

Property Values

The following table describes the values of this property.

Value Description
flex-start Flex items are packed toward the start of the line. This is default value.
flex-end Flex items are packed toward the end of the line.
center Flex items are packed toward the center of the line.
space-between Flex items are evenly distributed along the line.
space-around Flex items are evenly distributed so that the space between two adjacent items is the same.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element justify-content property.

Browser Compatibility

The justify-content property is supported in all major modern browsers.

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

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

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

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

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

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

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

Свойства

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

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

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

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

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

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

Илон Маск рекомендует:  Работа с датой и временем в MySQL, PHP

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

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

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

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

Новое значение justify-content можно найти в спецификации Box Alignment; оно не указано в спецификации Flexbox. Это значение space-evenly . В этом случае элементы равномерно распределяются в контейнере, а дополнительное пространство поровну распределяется между элементами и с обеих сторон.

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

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

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

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

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

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

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

Свойство по place-content

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему нет justify-self ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

CSS :: Свойство justify-content

css -свойство justify-content (от англ. justify content – выравнивание содержимого) используется для управления способом выравнивания флекс-элементов вдоль главной оси и распределения пространства между ними.

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

Характеристики

  • Значение по умолчанию: flex-start .
  • Применяется: к флекс-контейнеру .
  • Наследуется: нет .
  • Анимируется: нет .
  • JavaScript: object.style.justifyContent=»value» .

Синтаксис

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

Значения

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

Ссылки

Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.

Свойство justify-content, выравнивание вдоль главной оси

Вместо «горизонтального» выравнивания во флексбоксе используется свойство для распределения элементов вдоль главной оси — justify-content . Это свойство задаётся для флекс-контейнера.

Его значением по умолчанию является flex-start . При этом значении элементы располагаются у начала главной оси.

Вся теория и выполнение задания доступны по подписке

Подписка — это:

После подписки вы получите доступ:

  • теория курсов без ограничений;
  • доступ ко всем платным курсам;
  • интересные и сложные вызовы для практики;
  • безлимитные проверки испытаний.

Оформить подписку

justify-content

Easily manage projects with monday.com

The justify-content property is a sub-property of the Flexible Box Layout module.

It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

The justify-content property accepts five different values:

  • flex-start (default): items are packed toward the start line
  • flex-end : items are packed toward to end line
  • center : items are centered along the line
  • space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-around : items are evenly distributed in the line with equal space around them
  • space-evenly : items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

The following figure helps understand what the justify-content property actually does:

Syntax

The following demo shows how flex items behave depending on `justify-content` value:

  • The red list is set to flex-start
  • The yellow is set to flex-end
  • The blue is set to center
  • The green is set to space-between
  • The pink is set to space-around
  • The light green is set to space-evenly

Other Resources

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

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

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
7.0-7.1* 12.1 all 4.4 78 68

Blackberry browser 10+ supports the new syntax.

As of our latest December 2020 update, justify-content: space-evenly; is gaining support. There is a working draft spec on it.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
60 47 52 No 76 11

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
11.0-11.2 46 No 76 78 68

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL