В CSS Flexbox, почему нет свойств «justify-items» и «justify-self»?

Методы выравнивания элементов Flex вдоль основной оси

Как указано в вопросе:

Чтобы выровнять элементы flex вдоль основной оси, существует одно свойство: justify-content

Чтобы выровнять элементы гибкости вдоль поперечной оси, существует три свойства: align-content, align-items и align-self.

Затем задается вопрос:

Почему нет свойств justify-items и justify-self?

Один ответ может быть: Потому что они не нужны.

flexbox спецификация предоставляет два метода выравнивания элементов flex вдоль основной оси:

• Свойство ключевого слова justify-content и
• auto поля

оправдает содержание

Свойство justify-content выравнивает элементы flex вдоль основной оси контейнера flex.

Он применяется к контейнеру flex, но влияет только на элементы flex.

Существует пять параметров выравнивания:

• flex-start ~ Элементы Flex упакованы в начало строки.

  

• flex-end ~ Элементы Flex упакованы в конец строки.

  

• center ~ Элементы Flex упакованы в центр линии.

  

• space-between ~ Элементы Flex равномерно распределены, причем первый элемент выровнен по одному краю контейнера, а последний элемент выровнен по отношению к противоположному краю. Края, используемые первым и последним, зависят от flex-direction и writing mode (ltr или rtl).

  

• space-around ~ То же, что space-between, за исключением полуразмерных пробелов на обоих концах.

  

Автополя

С auto полями элементы гибки могут быть центрированы, отстояться или упаковываться в подгруппы.

В отличие от justify-content, который применяется к контейнеру flex, поля auto отправляются на гибкие элементы.

Выровняйте группу элементов flex вправо, но первый элемент влево

Сценарий вопроса:

• создание группы элементов flex align-right (justify-content: flex-end) но первый элемент выравнивается влево (justify-self: flex-start)

  Рассмотрим раздел заголовка с группой навигационных элементов и логотипом. С justify-self логотип может быть выровнен влево, в то время как позиции nav остаются далекое право, и все это гладко ( "сгибает" ) различные размеры экрана.

Другие полезные сценарии:

Поместите гибкий элемент в угол

Сценарий вопроса:

• размещение гибкого элемента в углу .box { align-self: flex-end; justify-self: flex-end; }

Центрировать гибкий элемент по вертикали и горизонтали

margin: auto является альтернативой justify-content: center и align-items: center.

Вместо этого кода в контейнере flex:

.container {
    justify-content: center;
    align-items: center;
}

Вы можете использовать это в элементе flex:

.box56 {
    margin: auto;
}

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

Центрируйте элемент гибкости и центрируйте второй элемент гибкости между первым и краем

Гибкий контейнер выравнивает элементы гибкости, распределяя свободное пространство.

Следовательно, чтобы создать равный баланс, чтобы средний элемент мог быть центрирован в контейнере вместе с одним элементом, должен быть введен противовес.

В приведенных ниже примерах вводятся невидимые третьи элементы гибкости (коробки 61 и 68) для баланса "реальных" предметов (вставка 63 и 66).

Конечно, этот метод не имеет ничего общего с семантикой.

В качестве альтернативы вы можете использовать псевдоэлемент вместо фактического элемента DOM. Или вы можете использовать абсолютное позиционирование. Здесь описаны все три метода: Центры и нижние выравнивающие элементы

ПРИМЕЧАНИЕ. Приведенные выше примеры будут работать только – с точки зрения истинного центрирования – когда самые внешние предметы равны высоте/ширине. Когда элементы гибкости различной длины, см. Следующий пример.

Центрируйте элемент гибкости, когда смежные элементы различаются по размеру

Сценарий вопроса:

• в строке из трех элементов гибкости, прикрепите средний элемент к центру контейнера (justify-content: center) и выровняйте соседний элементов к краям контейнера (justify-self: flex-start и justify-self: flex-end).

  Обратите внимание, что значения space-around и space-between в свойстве justify-content не будут удерживать средний элемент по центру относительно контейнера, если соседние элементы имеют разную ширину (см. демонстрацию).

Как отмечено, если все элементы гибкости не имеют одинаковой ширины или высоты (в зависимости от flex-direction), средний элемент не может быть по-настоящему центрирован. Эта проблема делает убедительный аргумент в отношении свойства justify-self (предназначенного для обработки задачи, конечно).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Вот два метода решения этой проблемы:

Решение №1: Абсолютное позиционирование

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

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

В приведенных ниже примерах средний элемент центрируется с абсолютным позиционированием, а внешние элементы остаются в потоке. Но один и тот же макет можно выполнить обратным образом: центрировать средний элемент с помощью justify-content: center и полностью позиционировать внешние элементы.

Решение # 2: Вложенные контейнеры Flex (без абсолютного позиционирования)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Вот как это работает:

• Верхний уровень div (.container) является контейнером flex.
• Каждый дочерний div (.box) теперь является гибким элементом.
• Каждому элементу .box предоставляется flex: 1, чтобы распределить контейнерное пространство одинаково.
• Теперь элементы потребляют все пространство в строке и имеют равную ширину.
• Сделайте каждый элемент контейнером (вложенным) и добавьте justify-content: center.
• Теперь каждый элемент span представляет собой элемент с центром в центре.
• Используйте поля flex auto для смещения внешнего span влево и вправо.

Вы также можете отказаться justify-content и использовать только поля auto.

Но justify-content может работать здесь, потому что поля auto всегда имеют приоритет. Из спецификации:

8.1. Выравнивание с помощью autoполя

Перед выравниванием через justify-content и align-self, любой положительное свободное пространство распределяется по автоматическим полям в этом измерении.

justify-content: space-same (concept)

Возвращаясь к justify-content в течение минуты, придумайте еще один вариант.

• space-same~ Гибрид space-between и space-around. Элементы Flex равномерно распределены (например, space-between), за исключением полуразмерных пространств на обоих концах (например, space-around), на обоих концах есть полноразмерные пробелы.

Этот макет может быть достигнут с помощью ::before и ::after псевдоэлементы на контейнере flex.

^{(кредит: @oriol для кода и @crl для ярлыка)}

ОБНОВЛЕНИЕ: Браузеры начали внедрять space-evenly, что и позволяет сделать это. Подробнее см. В этом сообщении: Равное расстояние вокруг элементов гибкости

PLAYGROUND (включает код для всех приведенных выше примеров)