В CSS Flexbox почему нет свойств" оправдать-элементы "и" оправдать-себя"?

методы выравнивания гибких элементов вдоль главной оси

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

для выравнивания элементов flex вдоль главной оси есть одно свойство:justify-content

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

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

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

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

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

1. на justify-content ключевое слово свойство и
2. auto поля

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

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

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

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

• flex-start ~ детали гибкого трубопровода упакованы к началу линия.

  

• flex-end ~ детали гибкого трубопровода упакованы к концу линии.

  

• center ~ детали гибкого трубопровода упакованы к центру линии.

  

• space-between ~ Flex элементы равномерно первый элемент выровнен по одному краю контейнера, а последний-по противоположному краю. Края, используемые первым и последним элементами, зависят от flex-direction и записи режим (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 логотип может быть выровнен влево, в то время как элементы навигации остаются далеко справа, и все это плавно настраивается ("сгибается") на отличающийся размер экрана.

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

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

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

• размещение элемента flex в углу .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;
}

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

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

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

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

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

конечно, этот метод не является чем-то большим с точки зрения семантики.

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

Примечание: приведенные выше примеры будут работать только-с точки зрения истинного центрирования-когда внешние элементы равны высоте / ширине. Если элементы flex имеют разную длину, см. Следующий пример.

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

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

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

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

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

#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 позволяет абсолютное позиционирование элементов flex. Это позволяет идеально центрировать средний элемент независимо от размера его братьев и сестер.

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

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

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

.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) представляет собой гибкий контейнер.
• каждый ребенок div (.box) теперь является элементом flex.
• каждого .box пункт дается flex: 1 распределить космос контейнера поровну.
• теперь элементы потребляют все пространство в строке и имеют одинаковую ширину.
• Сделайте каждый элемент (вложенным) контейнером flex и добавьте justify-content: center.
• теперь каждый span элемент представляет собой центрированный сгиб пункт.
• использовать flex auto поля для смещения внешнего spans влево и вправо.

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

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

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

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

оправдать-содержание: пространство-же (концепция)

возвращаясь к justify-content на минуту, вот идея для еще одного варианта.

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

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

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

обновление: браузеры начали реализацию space-evenly, который выполняет выше. См. этот пост для деталей: равное пространство между элементами flex

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