Как выровнять один элемент flexbox (переопределить justify-content)

283

Вы можете переопределить align-itemsс align-selfпомощью гибкого элемента. Я ищу способ переопределить justify-contentгибкий элемент.

Если у вас был контейнер с флексбоксом justify-content:flex-end, но вы хотите, чтобы первым был элемент justify-content: flex-start, как это можно сделать?

На это лучше всего ответил этот пост: https://stackoverflow.com/a/33856609/269396

css flexbox

— Mahks
источник

2

Используйте autoполя. Смотрите рамку № 26 здесь: stackoverflow.com/a/33856609/3597276

— Майкл Бенджамин

Спасибо за ссылку на самый полезный ответ!

— Брейди Доулинг

550

Там , кажется, не будет justify-self, но вы можете добиться подобного результата настройки , подходящие marginдля auto¹. Например для flex-direction: row(по умолчанию) вы должны установить margin-right: autoвыравнивание дочернего элемента по левому краю.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

Развернуть фрагмент

Behavior Это поведение определяется спецификацией Flexbox .

— Павло
источник

51

Эта техника превосходна и работает в вертикальном направлении. Например, вы хотите, чтобы последний элемент внутри контейнера с фиксированной высотой придерживался дна. Вы можете использовать `` `.container {flex-direction: column; justify-content: flex-start} .last-item {margin-top: auto} `` `

— Кристиан Шленскер

6

@krulik Это поведение определяется спецификацией Flexbox

— Pavlo

7

После еще одного расследования, justify-selfвозможно, не имеет ничего общего с, flexboxа скорее используется, css gridsно я не уверен. Я не могу заставить его работать в Chrome с flexbox.

— Джейк Уилсон,

8

Что если я хочу, чтобы один элемент находился слева, а другой - в центре?

— Фахми

3

«В макетах flexbox это свойство игнорируется» - взято из документации mozilla для justify-self

— Finlay Percy

19

AFAIK, в спецификациях этого свойства нет, но вот трюк, который я использовал: установите для элемента контейнера (тот, что с display:flex) значение justify-content:space-around Затем добавьте дополнительный элемент между первым и вторым элементом и установите его flex-grow:10(или некоторые другие). другое значение, которое работает с вашей настройкой)

Редактировать: если элементы тесно выровнены, это хорошая идея, чтобы добавить flex-shrink: 10;к дополнительному элементу, так что макет будет правильно реагировать на небольших устройствах.

— eeglbalazs
источник

1

Он работает без указания ширины (по крайней мере, в моей ситуации)

— eeglbalazs

Попробуйтеmin-width: 0

— The

13

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

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

Развернуть фрагмент

Или, если вы делали то же самое с flex-start и flex-end в обратном порядке, вы просто меняете порядок контейнера по умолчанию-flex и lone child.

— borkxs
источник

5

Похоже, justify-selfскоро появится в браузерах . На MDN уже есть статья об этом . На момент написания этой статьи поддержка браузера была слабой.

Что касается маржинального решения: у меня есть сетка Flexbox с пробелами. Там нет flex-gapсобственности (пока?) С Flexbox. Так что для желобов я использую отступы и поля, поэтому margin: autoнеобходимо перезаписать другие поля ...

— Фрэнк Ламмер
источник

7

К сожалению,In flexbox layouts, this property is ignored

— Sphinxxx

1

@Sphinxxx Да, но justify-self делает работу в display: gridконтейнере. Это последнее время, как Flexbox, так предоставляет широкие возможности позиционирования , как align-items, align-self, а также некоторые дополнительные функции , такие как , кто нам нужен здесь, justify-self. Я рекомендую использовать flexbox везде, где достаточно, но если ему чего-то не хватает, то, скорее всего, у сетки есть то, что вы ищете. (. , например , легко выравнивая один ребенок до центра-х и центр-у, а другой к правой х центровой у - Flexbox есть margin-left: autoдля легкой левый + правый, но не в центре + справа) Пример: stackoverflow.com/a/57128453 / 2441655

— Venryx

1

Для тех ситуаций , когда ширина элементов вы хотите , flex-endкак известно, вы можете установить их прогиб в «0 0 ## пикс» и установить элемент , который вы хотите flex-startсflex:1

Это заставит псевдоэлемент flex-startзаполнить контейнер, просто отформатировать его text-align:leftили что-то еще.

— Mahks
источник

0

Я решил аналогичный случай, установив стиль внутреннего элемента в margin: 0 auto.
Ситуация: Мое меню обычно содержит три кнопки, в этом случае они должны быть justify-content: space-between. Но когда есть только одна кнопка, теперь она будет выровнена по центру, а не влево.

— Micros
источник