Почему не работает justify content space between

justify-content

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

Интерактивный пример ниже демонстрирует некоторые из значений с использованием Grid Layout.

Try it

Выравнивание выполняется после применения длин и автоматических полей. Это означает, что если в макете Flexbox есть хотя бы один гибкий элемент с flex-grow , отличным от 0 , это не будет иметь никакого эффекта, так как не будет доступных пространство.

Syntax

Values

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

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

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

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

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

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

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

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

baseline first baseline last baseline

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

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

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

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

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

Примечание: stretch не поддерживается гибкими боксами (flexbox).

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

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

Свойство justify-content Flexbox перестает работать с медиа-запросом

Я пытался вертикально сосредоточить свой логотип и неупорядоченный список в своем заголовке с помощью flex CSS, который мне удалось сделать, но теперь я не могу заставить их плавать влево и вправо от заголовка. float:left и float:right значения, которые у меня были раньше, не влияют на дочерние div, поэтому я добавил

в заголовок для достижения этого. Кажется, что он работает, когда браузер имеет полную ширину, однако когда мой первый медиа-запрос начинается с 1080px, я отключил свой неупорядоченный список и заменяюсь значком меню навигации. По какой-то причине значок меню отказывается плавать справа от заголовка — есть ли у кого-нибудь идеи, почему?

Попробуйте добавить margin-left: auto к значку меню навигации в запросе на медиа.

Причина justify-content: space-between не работает так, как вы ожидаете в медиа-запросе, так это то, что ваш контейнер flex — .header — несмотря на отображение только двух элементов flex (логотип и значок nav), на самом деле содержит три элемента flex.

Третий элемент — это основное меню навигации, которое невозможно увидеть, поскольку оно содержит потомка с display: none .

Таким образом, space-between контейнером настраивается следующим образом:

Когда экран достаточно широкий, NAV ICON имеет display: none . Таким образом, space-between работами по назначению: LOGO и NAV MENU выровнены на противоположных краях.

Но когда медиа-запрос срабатывает на скорости 1080 пикселей, display: none переключается с NAV ICON на потомка NAV MENU. Поэтому, хотя NAV MENU исчезает, он все еще занимает это пространство, а NAV ICON остается посередине.

Вы можете либо применить display: none к самому NAV MENU, либо использовать гибкие auto поля, чтобы заставить NAV ICON на правый край.

Кроме того, причина, по которой ваш float: right и float: left , не работает, потому что свойство float игнорируется в контейнере flex.

justify-content

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:

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

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

Mobile / Tablet

Blackberry browser 10+ supports the new syntax.

As of our latest December 2018 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

Mobile / Tablet

For more informations about how to mix syntaxes in order to get the best browser support, please refer to our “Using Flexbox” article .

Свойство `justify-content` не работает на вложенном flexbox

Я новичок в HTML и CSS, и я столкнулся с проблемой с меню, которое я сейчас кодирую.

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

Спасибо за вашу помощь!

2 ответа

Свойство justify-content в вашем коде работает нормально.

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

Попробуйте использовать display: flex или добавьте width: 100% к своим правилам.

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

Нет смысла указывать justify-content: space-around в контейнере display:inline-flex , если контейнер также не имеет ширины (которой не хватает много ваших контейнеров display:inline-flex )