Рассмотрим основную ось и поперечную ось гибкого контейнера:
Источник: W3C
Для выравнивания гибких элементов вдоль главной оси есть одно свойство:
Для выравнивания изгибаемых элементов вдоль поперечной оси есть три свойства:
На изображении выше основная ось горизонтальная, а поперечная ось вертикальная. Это направления по умолчанию для гибкого контейнера.
Тем не менее, эти направления могут быть легко взаимозаменяемы с flex-direction
собственностью.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(Ось креста всегда перпендикулярна главной оси.)
Моя точка зрения при описании работы осей заключается в том, что в обоих направлениях нет ничего особенного. Главная ось, поперечная ось, они одинаковы по важности и flex-direction
позволяют легко переключаться назад и вперед.
Так почему же поперечная ось получает два дополнительных свойства выравнивания?
Почему align-content
и align-items
объединены в одно свойство для главной оси?
Почему главная ось не получает justify-self
свойства?
Сценарии, где эти свойства будут полезны:
размещение гибкого элемента в углу гибкого контейнера
#box3 { align-self: flex-end; justify-self: flex-end; }
сделать группу из flex-элементов align-right (
justify-content: flex-end
), но первый элемент выровнять по левому краю (justify-self: flex-start
)Рассмотрим заголовок раздела с группой элементов навигации и логотипом. С
justify-self
логотипом можно было выровнять влево, в то время как навигационные элементы остаются далеко вправо, и все это плавно регулируется («сгибается») к разным размерам экрана.в ряду из трех гибких элементов прикрепите средний элемент к центру контейнера (
justify-content: center
) и выровняйте соседние элементы по краям контейнера (justify-self: flex-start
иjustify-self: flex-end
).Обратите внимание, что значения
space-around
и свойствоspace-between
onjustify-content
не будут держать средний элемент по центру контейнера, если смежные элементы имеют разную ширину.
На момент написания этой статьи не упоминалось justify-self
ни justify-items
о спецификации Flexbox .
Однако в модуле выравнивания блоков CSS , который является незаконченным предложением W3C по созданию общего набора свойств выравнивания для использования во всех блочных моделях, есть следующее:
Источник: W3C
Вы заметите это justify-self
и justify-items
рассматриваются ... но не для flexbox .
В заключение я повторю главный вопрос:
Почему отсутствуют свойства "justify-items" и "justify-self"?
источник
justify-self
работать на гибкий элемент? Предположим, у вас есть элементы a, b, c, d с дополнительным пространством для распределения вокруг них, а контейнер flex имеет ихjustify-content: space-between
, поэтому они заканчиваются как | abcd |. Что бы это значило добавить, например,justify-self: center
или «justify-self: flex-end» просто к пункту «b» там? Где вы ожидаете, что это пойдет? (Я вижу некоторые демонстрации в одном из ответов здесь, но я не вижу четкого способа, как это будет работать в целом.)justify-content: flex-start
, поэтому в начале пункты переполнены, как | abcd |. Что бы вы ожидали от него, если вы поместитеjustify-self: [anything]
туда элемент «b»?)justify-self
работали с флексом? Я бы сказал, не так иначе, какauto
поля уже работают на гибких элементах. Во втором примереjustify-self: flex-end
пункт d переместит его в дальний край. Это само по себе было бы отличной особенностью, которуюauto
уже могут делать поля. Я разместил ответ с демонстрацией.justify-content
иjustify-self
указан, так, чтобы случаи с конфликтами (как сценарии, о которых я спрашивал) четко и разумно определены. Как я уже отмечал в своем ответе,{justify|align}-self
речь идет{justify|align}-self
о выравнивании элементов в большем поле, размер которого не зависит от значения - и на главной оси такого блока нет, чтобы можно было выровнять гибкий элемент.justify-self
и как будетеjustify-content
взаимодействовать в тех случаях, когда они конфликтуют (например, сценарии, которые я изложил). Автомобильные поля просто не взаимодействуютjustify-content
вообще - они крадут все упаковочное пространство, прежде чемjustify-content
получить возможность его использовать. Таким образом, авто наценки не очень хороший аналог того, как это будет работать.Ответы:
Методы выравнивания гибких элементов вдоль главной оси
Как указано в вопросе:
Затем возникает вопрос:
Один ответ может быть: потому что они не нужны.
Спецификация flexbox предоставляет два метода выравнивания элементов flex вдоль главной оси:
justify-content
ключевого слова иauto
поляобосновывать-контент
В
justify-content
совмещается собственности сгибать элементы вдоль главной оси гибкого контейнера.Он применяется к гибкому контейнеру, но влияет только на гибкие элементы.
Есть пять вариантов выравнивания:
flex-start
Гибкие элементы упакованы в начале линии.flex-end
Гибкие элементы упакованы в конце линии.center
Гибкие элементы упакованы по направлению к центру линии.space-between
Элементы Flex расположены равномерно, первый элемент выровнен по одному краю контейнера, а последний элемент - по противоположному краю. Края , используемые первыми и последние пункты зависятflex-direction
и режим записи (ltr
илиrtl
).space-around
~ То же самое, что иspace-between
с половинными пробелами на обоих концах.Авто наценки
С
auto
полями , гибкие элементы могут быть отцентрированы, разнесены или упакованы в подгруппы.В отличие от того
justify-content
, что применяется к гибкому контейнеру,auto
поля относятся к гибким элементам.Они работают, потребляя все свободное пространство в указанном направлении.
Выровняйте группу изгибаемых элементов справа, но первый элемент слева
Сценарий из вопроса:
Другие полезные сценарии:
Поместите гибкий элемент в угол
Сценарий из вопроса:
Центрируйте гибкий элемент по вертикали и горизонтали
margin: auto
является альтернативойjustify-content: center
иalign-items: center
.Вместо этого кода в контейнере flex:
Вы можете использовать это на элементе flex:
Эта альтернатива полезна при центрировании гибкого элемента, который переполняет контейнер .
Отцентрируйте гибкий элемент и отцентрируйте второй гибкий элемент между первым и краем
Гибкий контейнер выравнивает гибкие элементы, распределяя свободное пространство.
Следовательно, чтобы создать равный баланс , чтобы средний элемент мог быть центрирован в контейнере с одним элементом рядом, необходимо ввести противовес.
В приведенных ниже примерах невидимые третьи гибкие элементы (вставки 61 и 68) представлены для уравновешивания «реальных» предметов (вставки 63 и 66).
Конечно, этот метод не является чем-то большим с точки зрения семантики.
В качестве альтернативы вы можете использовать псевдоэлемент вместо фактического элемента DOM. Или вы можете использовать абсолютное позиционирование. Здесь рассматриваются все три метода: гибкие элементы по центру и снизу.
ПРИМЕЧАНИЕ. Приведенные выше примеры будут работать - с точки зрения истинного центрирования - только когда самые внешние элементы равны высоте / ширине. Когда гибкие элементы имеют разную длину, см. Следующий пример.
Центрируйте гибкий элемент, когда соседние элементы различаются по размеру
Сценарий из вопроса:
Как уже отмечалось, если все гибкие элементы не имеют одинаковую ширину или высоту (в зависимости от
flex-direction
), средний элемент не может быть действительно центрирован. Эта проблема дает веские основания дляjustify-self
свойства (конечно, для решения задачи).Показать фрагмент кода
Вот два метода решения этой проблемы:
Решение № 1: Абсолютное позиционирование
Спецификация flexbox обеспечивает абсолютное позиционирование элементов flex . Это позволяет среднему предмету быть идеально отцентрированным независимо от размера его родных братьев.
Просто имейте в виду, что, как и все абсолютно позиционированные элементы, элементы удаляются из потока документов . Это означает, что они не занимают места в контейнере и могут перекрывать своих братьев и сестер.
В приведенных ниже примерах средний элемент центрируется с абсолютным позиционированием, а внешние элементы остаются в потоке. Но та же схема может быть достигнута и в обратном порядке: отцентрируйте средний элемент по центру
justify-content: center
и расположите абсолютно все внешние элементы.Решение № 2: Вложенные Flex-контейнеры (без абсолютного позиционирования)
Вот как это работает:
.container
) - это гибкий контейнер..box
элемент div ( ) теперь является гибким элементом..box
элемент данflex: 1
для того, чтобы распределить контейнерное пространство одинаково.justify-content: center
.span
элемент представляет собой центрированный гибкий элемент.auto
поля, чтобы сместить внешниеspan
s влево и вправо.Вы также можете отказаться
justify-content
и использоватьauto
поля исключительно.Но
justify-content
может работать здесь, потому чтоauto
поля всегда имеют приоритет. Из спецификации:justify-content: space-same (концепция)
Возвращаясь к
justify-content
минутке, вот идея еще одного варианта.space-same
~ Гибридspace-between
иspace-around
. Гибкие элементы расположены равномерно (какspace-between
), за исключением того, что вместо полусегментных пробелов на обоих концахspace-around
есть полноразмерные пробелы на обоих концах.Это расположение может быть достигнуто с
::before
и::after
псевдо-элементов на гибком контейнере.(кредит: @oriol для кода и @crl для метки)
ОБНОВЛЕНИЕ: Браузеры начали реализацию
space-evenly
, которая выполняет вышеуказанное. Смотрите этот пост для деталей: Равное пространство между гибкими элементамиPLAYGROUND (включает код для всех примеров выше)
источник
justify-content
иauto
полей. Для другой стороны монеты - по поперечной оси ,align-items
,align-self
иalign-content
- см этот пост: stackoverflow.com/q/42613359/3597276justify-self
собственности ...auto
поля полезны, ноjustify-self: center
были бы идеальными. Способ решения поставленной вами проблемы - создать невидимые дубликаты на противоположной стороне. Смотрите мой ответ здесь: stackoverflow.com/q/38948102/3597276space-same
концепция сейчас реальна. Он называетсяspace-evenly
, но на данный момент поддерживается только Firefox: developer.mozilla.org/en-US/docs/Web/CSS/justify-contentspace-evenly
в других ответах: stackoverflow.com/q/45134400/3597276space-evenly
был поддержан в Chrome 57-60, но только для Grid layout. Эта ошибка была исправлена, и начиная с Chrome 61 она поддерживается и для Flexbox. Кроме того , есть способ эмуляции без псевдо-элементов:.item { margin-right: auto } .item:first-child { margin-left: auto }
.Я знаю, что это не ответ, но я хотел бы внести свой вклад в это дело, чтобы оно того стоило. Было бы здорово, если бы они могли выпустить
justify-self
flexbox, чтобы сделать его по-настоящему гибким.Я считаю, что когда на оси несколько элементов, наиболее логичным способом
justify-self
поведения является выравнивание с ближайшими соседями (или ребром), как показано ниже.Я искренне надеюсь, что W3C это заметит и, по крайней мере, рассмотрит. знак равно
Таким образом, вы можете иметь элемент, который действительно центрирован, независимо от размера левой и правой рамки. Когда один из боксов достигает точки центрального бокса, он будет просто толкать его, пока не останется больше места для распределения.
Простота создания потрясающих макетов бесконечна, взгляните на этот «сложный» пример.
источник
justify-self
иjustify-items
.auto
поля не являются полной заменойjustify-self
. Я осторожно озвучил свой предыдущий комментарий, сказав, чтоauto
поля будут покрывать некоторые варианты использования . Как вы заметили, он не может центрировать элемент на месте, когда соседние элементы имеют разные размеры. Тем не менее, он предоставляет больше возможностей для выравнивания элементов Flex. Когда я впервые начал изучать flexbox, я думал, чтоjustify-content
невидимые спейсерные элементы были единственным способом.Это было задано в списке в стиле www, и Таб Аткинс (редактор спецификаций) дал ответ, объясняющий почему . Я подробно остановлюсь здесь.
Для начала давайте предположим, что наш flex-контейнер является однострочным (
flex-wrap: nowrap
). В этом случае очевидно, что существует разница в выравнивании между главной осью и поперечной осью - на главной оси есть несколько элементов, уложенных друг на друга, но только один элемент расположен на поперечной оси. Так что имеет смысл иметь настраиваемое для каждого элемента «align-self» на поперечной оси (поскольку каждый элемент выравнивается отдельно), тогда как это не имеет смысла на главной оси (поскольку там пункты выровнены все вместе).Для многострочного flexbox та же логика применяется к каждой «гибкой линии». В данной строке элементы выровнены по отдельности по перекрестной оси (поскольку в поперечной оси имеется только один элемент на линию), а по основной оси - все вместе.
Вот еще один способ формулируя его: так, все из
*-self
и*-content
свойства о том , как распределить дополнительное пространство вокруг вещей. Но ключевое отличие состоит в том, что*-self
версии предназначены для случаев, когда на этой оси есть только одна вещь , а версии - для тех случаев, когда на этой оси*-content
потенциально много вещей . Сценарии «одно против многих» - это разные типы проблем, поэтому у них есть разные типы опций - например, значенияspace-around
/space-between
имеют смысл*-content
, но не для*-self
.SO: На главной оси flexbox есть много вещей, которые должны распределять пространство вокруг. Таким образом,
*-content
свойство имеет смысл, но не*-self
свойство.В противоположность этому, в поперечной оси у нас есть и a,
*-self
и*-content
свойство. Один определяет, как мы будем распределять пространство вокруг множества линий сгиба (align-content
), а другой (align-self
) определяет, как распределить пространство вокруг отдельных элементов сгиба на поперечной оси в пределах данной линии сгиба.(Я игнорирую
*-items
свойства здесь, так как они просто устанавливают значения по умолчанию для*-self
.)источник
justify-self
может быть проблема на оси с несколькими элементами в отличие от одного элемента. Однако я действительно надеюсь, что они рассмотрят это дальше, в ситуации с несколькими предметами, как они будутjustify-self
себя вести, потому что в некоторых ситуациях это может быть действительно полезным. Например ( stackoverflow.com/questions/32378953/… ).justify-self
.*-self
случаями, когда у нас есть только одна вещь для выравнивания, тогда как со*-content
случаями, когда у нас есть много вещей для выравнивания. Это делает это немного яснее?auto
поля, также являющиеся частью спецификации, позволяют выравнивать * -self с несколькими элементами в строке. Нет четкой причины, по которой свойства ключевых слов не могут.Я знаю, что это не использует flexbox, но для простого варианта использования из трех элементов (один слева, один в центре, один справа) это может быть легко достигнуто с помощью
display: grid
родительского, дочернего элементовgrid-area: 1/1/1/1;
иjustify-self
позиционирования из тех детей.источник
Я только нашел свое решение этой проблемы, или, по крайней мере, мою проблему.
Я использовал
justify-content: space-around
вместоjustify-content: space-between;
.Таким образом, конечные элементы будут придерживаться сверху и снизу, и вы можете иметь собственные поля, если хотите.
источник