Html style justify center

justify-content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

The interactive example below demonstrates some of the values using Grid Layout.

Try it

The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with flex-grow different from 0 , it will have no effect as there won’t be any available space.

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 */ justify-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 Start and end gaps are half the size of the space between each item */ justify-content: space-evenly; /* Distribute items evenly Start, in-between, and end gaps have equal sizes */ 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: revert; justify-content: revert-layer; justify-content: unset; 

Values

The items are packed flush to each other toward the start edge of the alignment container in the main axis.

The items are packed flush to each other toward the end edge of the alignment container in the main axis.

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 .

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 .

The items are packed flush to each other toward the center of the alignment container along the main axis.

The items are packed flush with each other toward the left edge of the alignment container. When the property’s horizontal axis is not parallel with the inline axis, such as when flex-direction: column; is set, this value behaves like start .

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 (in a grid container) or the main-axis (in a flexbox container), this value behaves like start .

Behaves as stretch , except in the case of multi-column containers with a non- auto column-width , in which case the columns take their specified column-width rather than stretching to fill the container. As stretch behaves as start in flex containers, normal also behaves as start .

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.

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.

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.

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.

Note: While stretch is supported by flexible boxes (flexbox), when applied on a flexbox, as stretching is controlled by flex , stretch behaves as start .

If the item overflows the alignment container, then the item is aligned as if the alignment mode is start . The desired alignment will not be implemented.

Even if the item overflows the alignment container, the desired alignment will be implemented. Unlike safe , which will ignore the desired alignment in favor of preventing overflow.

Formal definition

Formal syntax

justify-content =
normal |
|
? [ | left | right ]

=
space-between |
space-around |
space-evenly |
stretch

=
unsafe |
safe

=
center |
start |
end |
flex-start |
flex-end

Examples

Setting flex item distribution

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

div id="container"> div>div> div>div> div>div> div> select id="justifyContent"> option value="start">startoption> option value="end">endoption> option value="flex-start">flex-startoption> option value="flex-end">flex-endoption> option value="center">centeroption> option value="left">leftoption> option value="right">rightoption> option value="space-between" selected>space-betweenoption> option value="space-around">space-aroundoption> option value="space-evenly">space-evenlyoption> option value="stretch">stretchoption> select> 

const justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", (evt) =>  document.getElementById("container").style.justifyContent = evt.target.value; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

justify-content¶

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

Демо¶

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

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ justify-content: flex-start; /* Выравнивание элементов с самого начала */ justify-content: flex-end; /* Выравнивание элементов с самого конца */ justify-content: left; /* Выравнивание элементов по левому краю */ justify-content: right; /* Выравнивание элементов по правому краю */ /* Выравнивание относительно осевой линии */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* Распределенное выравнивание */ /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют полуразмерное пространство с обоих концов */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют равное пространство вокруг */ justify-content: space-evenly; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют "авто-размер", чтобы соответствовать контейнеру */ justify-content: stretch; /* Выравнивание при переполнении */ justify-content: safe center; justify-content: unsafe center; /* Глобальные значения */ justify-content: inherit; justify-content: initial; justify-content: unset; 

Значения¶

Значение по-умолчанию: normal

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

start Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси. end Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси. flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы прижимаются по центру строки. left Элементы упакованы вплотную друг к другу к левому краю контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start . right Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .

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

space-between Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

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

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

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

unsafe Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.

Примечание¶

Спецификации¶

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

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

 html> head> meta charset="utf-8" /> title>justify-contenttitle> 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> 

Источник