Вы можете переопределить align-items
с align-self
помощью гибкого элемента. Я ищу способ переопределить justify-content
гибкий элемент.
Если у вас был контейнер с флексбоксом justify-content:flex-end
, но вы хотите, чтобы первым был элемент justify-content: flex-start
, как это можно сделать?
На это лучше всего ответил этот пост: https://stackoverflow.com/a/33856609/269396
auto
поля. Смотрите рамку № 26 здесь: stackoverflow.com/a/33856609/3597276Ответы:
Там , кажется, не будет
justify-self
, но вы можете добиться подобного результата настройки , подходящиеmargin
дляauto
¹. Например дляflex-direction: row
(по умолчанию) вы должны установитьmargin-right: auto
выравнивание дочернего элемента по левому краю.Behavior Это поведение определяется спецификацией Flexbox .
источник
justify-self
возможно, не имеет ничего общего с,flexbox
а скорее используется,css grids
но я не уверен. Я не могу заставить его работать в Chrome с flexbox.AFAIK, в спецификациях этого свойства нет, но вот трюк, который я использовал: установите для элемента контейнера (тот, что с
display:flex
) значениеjustify-content:space-around
Затем добавьте дополнительный элемент между первым и вторым элементом и установите егоflex-grow:10
(или некоторые другие). другое значение, которое работает с вашей настройкой)Редактировать: если элементы тесно выровнены, это хорошая идея, чтобы добавить
flex-shrink: 10;
к дополнительному элементу, так что макет будет правильно реагировать на небольших устройствах.источник
min-width: 0
Если вы на самом деле не ограничены тем, чтобы хранить все эти элементы как узлы-братья, вы можете обернуть те, которые идут вместе, в другой гибкий блок по умолчанию, и контейнер обоих использует пробел.
Или, если вы делали то же самое с flex-start и flex-end в обратном порядке, вы просто меняете порядок контейнера по умолчанию-flex и lone child.
источник
Похоже,
justify-self
скоро появится в браузерах . На MDN уже есть статья об этом . На момент написания этой статьи поддержка браузера была слабой.Что касается маржинального решения: у меня есть сетка Flexbox с пробелами. Там нет
flex-gap
собственности (пока?) С Flexbox. Так что для желобов я использую отступы и поля, поэтомуmargin: auto
необходимо перезаписать другие поля ...источник
In flexbox layouts, this property is ignored
justify-self
делает работу вdisplay: grid
контейнере. Это последнее время, как Flexbox, так предоставляет широкие возможности позиционирования , какalign-items
,align-self
, а также некоторые дополнительные функции , такие как , кто нам нужен здесь,justify-self
. Я рекомендую использовать flexbox везде, где достаточно, но если ему чего-то не хватает, то, скорее всего, у сетки есть то, что вы ищете. (. , например , легко выравнивая один ребенок до центра-х и центр-у, а другой к правой х центровой у - Flexbox естьmargin-left: auto
для легкой левый + правый, но не в центре + справа) Пример: stackoverflow.com/a/57128453 / 2441655Для тех ситуаций , когда ширина элементов вы хотите ,
flex-end
как известно, вы можете установить их прогиб в «0 0 ## пикс» и установить элемент , который вы хотитеflex-start
сflex:1
Это заставит псевдоэлемент
flex-start
заполнить контейнер, просто отформатировать егоtext-align:left
или что-то еще.источник
Я решил аналогичный случай, установив стиль внутреннего элемента в
margin: 0 auto
.Ситуация: Мое меню обычно содержит три кнопки, в этом случае они должны быть
justify-content: space-between
. Но когда есть только одна кнопка, теперь она будет выровнена по центру, а не влево.источник