Как обосновать один элемент flexbox (переопределить значение-обоснование)

Ответ 1

Кажется, что нет justify-self, но вы можете достичь аналогичного результата, подходящего margin до auto ¹. E. g. для 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>

Ответ 2

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

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

Ответ 3

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

.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>

Ответ 4

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

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

Ответ 5

В тех ситуациях, где ширина элементов, которые вы хотите использовать flex-end, известна, вы можете установить их flex на "0 0 ## px" и установить для элемента, который хотите flex-start, с помощью flex:1

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

Ответ 6

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

Ответ 7

Я знаю, что это не использует flexbox, но для простого варианта использования из трех элементов (один слева, один в центре, один справа) это можно легко сделать с помощью display: grid на родительском элементе, grid-area: 1/1/1/1; на детей, и justify-self для позиционирования этих детей.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>