Почему свойство align-content: flex-end;влияют на отображение элементов, когда нет нескольких строк элементов?

Question

#flex-container {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: flex-end;
  border: 2px solid;
}

#first-box {
  background-color: gray;
  width: 200px;
  margin: 5px;
}

#second-box {
  background-color: aqua;
  width: 200px;
  margin: 5px;
}

<div id="flex-container">
  <div id="first-box">Box 1 </div>
  <div id="second-box">Box 2</div>
</div>

Правило: Должно быть несколько строк элементов, чтобы это свойство имело какой-либо эффект! Почему тогда это влияет на отображение, когдане несколько строк предметов?Эти два поля должны быть в центре браузера, но внизу.

Answer 1

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

Правило не совсем так.Должен быть многострочный гибкий контейнер, и это определяется не количеством строк, а свойством flex-wrap.

_{Прочитайте ниже до конца, чтобы получить полное объяснение}

---

От спецификация :

Свойство align-content выравнивает строки гибкого контейнера внутри гибкого контейнера , если на поперечной оси имеется дополнительное пространство .. Обратите внимание, что это свойство не влияет на однострочный гибкий контейнер ¹ .

и

Начальная буква: растянуть

Итакпо умолчанию ваша одна линия растягивается, чтобы заполнить все доступное пространство, а содержимое центрируется внутри.Если вы выберете flex-end, ваша строка будет соответствовать ее содержанию и будет размещена внизу.Контент по-прежнему центрирован внутри, но поскольку высота теперь определяется контентом, вертикальное центрирование бесполезно.

Хитрость заключается в том, чтобы понять, что центрирование во flexbox происходит внутри строки, а не контейнера, а в большинствев случае, если линия вытянута, чтобы соответствовать высоте контейнера ² .При изменении align-content и flex-wrap дело уже не в этом.

---

flex-end

Линии упакованы ближе к концу гибкого контейнера .Крестовой край последней строки помещается заподлицо с поперечным краем гибкого контейнера, а каждая предыдущая строка помещается заподлицо с последующей строкой.

stretch

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

Некоторые примеры для лучшей иллюстрации.Розовая и желтая окраска представляют собой линии flexbox.

.box {
  display: inline-flex;
  vertical-align: top;
  width: 100px;
  height: 100px;
  border: 1px solid;
  align-items: center;
  flex-wrap: wrap;
}

span {
  width: 100%;
  height: 10px;
  margin: 5px;
  background: red;
}

<div class="box" style="background:yellow;">
  <span></span>
</div>

<div class="box" style="background:linear-gradient(yellow 50%,pink 50%);">
  <span></span>
  <span></span>
</div>
<div class="box" style="align-content:flex-end">
  <span style="box-shadow:0 0 0 5px yellow"></span>
</div>
<div class="box" style="align-content:flex-end">
  <span style="box-shadow:0 0 0 5px yellow"></span>
  <span style="box-shadow:0 0 0 5px pink"></span>
</div>

---

¹ Теперь сложная часть заключается в использовании flex-wrap

A однострочный гибкий контейнер (т. Е. Один с flex-wrap: nowrap) размещает все свои дочерние элементы в одну строку, даже если это приведет к переполнению его содержимого.

A multi-line flex-контейнер (т. е. один с flex-wrap: wrap или flex-wrap: wrap-reverse) разбивает свои flex-элементы на несколько строк, ...

Если указать wrap как flex-wrap,он больше не считается однострочным, даже если есть только одна строка, поэтому align-content примените, как описано выше.

Если оставить его nowrap, то ничего не произойдет, потому что это однострочный контейнер flexbox ипо умолчанию эта строка всегда растягивается, чтобы заполнить пробел:

.box {
  display: inline-flex;
  vertical-align: top;
  width: 100px;
  height: 100px;
  border: 1px solid;
  align-items: center;
}

span {
  width: 100%;
  height: 10px;
  margin: 5px;
  background: red;
}

<div class="box" >
  <span></span>
</div>

<div class="box" >
  <span></span>
  <span></span>
</div>
<div class="box" style="align-content:flex-end">
  <span ></span>
</div>
<div class="box" style="align-content:flex-end">
  <span ></span>
  <span ></span>
</div>

² Примечание. Только многолинейные гибкие контейнеры когда-либо имеют свободное пространство на поперечной оси для выравнивания линийв, потому что в однострочном гибком контейнере подошва автоматически растягивается, чтобы заполнить пространство.

Answer 2

Если вы перейдете на страницу "попробуй" для "Свойства CSS align-content" на w3schools.com, вы можете вставить свой CSS и посмотреть, что именно он делает.Насколько я вижу, он действует, как и ожидалось, и, как объясняет Темани.Вы также можете настроить код, пока он не сделает то, что вы на самом деле хотите.