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

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

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

для выравнивания гибких элементов вдоль главной оси существует одно свойство:justify-content

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

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

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

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

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

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

---

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

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

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

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

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

  

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

  

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

  

• space-between ~ гибкие элементы равномерно разнесенный, с первым элементом, выровненным по одному краю контейнера, и последним элементом, выровненным по противоположному краю. Ребра, используемые первым и последним элементами, зависят от flex-direction и записи режим (ltr или rtl).

  

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

  

---

Авто Поля

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

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

они работают, потребляя все свободное пространство в указанном направлении.

---

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

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

• создание группы гибких элементов выравнивания по правому краю (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;
}

вы можете использовать это на флекс пункт:

.box56 {
    margin: auto;
}

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

---

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

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

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

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

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

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

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

---

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

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

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

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

как уже отмечалось, Если все элементы flex не имеют равной ширины или высоты (в зависимости от 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: вложенные гибкие контейнеры (без абсолютного позиционирования)

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

вы также можете отказаться 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. Гибкие элементы расположены равномерно (например space-between), за исключением вместо пробелов половинного размера на обоих концах (например space-around), есть полноразмерные пространства на обоих концах.

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

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

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

---

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