CSS flexbox: разница между элементами выравнивания и выравниванием содержимого

Я нахожу разницу между align-items и align-content в CSS flexbox свойствами крайне запутанными. Я просматривал документы и несколько примеров в Интернете в течение нескольких часов, но до сих пор не могу полностью понять это.

Чтобы быть более точным, align-items дает мне полный смысл, и он полностью понимает, как он себя ведет. С другой стороны, align-content неясно. В частности, я не понимаю, почему мы должны использовать два разных свойства в зависимости от того, все ли содержимое вписывается в одну строку или несколько.

Может кто-нибудь помочь объяснить это в непрофессиональных условиях?

Спасибо!

Ответ 1

Как описано в 6. Flex Lines,

Элементы Flex в контейнере и выровнены в гибких линиях, гипотетические контейнеры, используемые для группировки и выравнивание по алгоритму компоновки. Гибкий контейнер может быть однострочный или многострочный, в зависимости от flex-wrapСвойство

Затем вы можете установить различные выравнивания:

Свойство justify-content применяется ко всем контейнерам flex и устанавливает выравнивание элементов гибкости вдоль основной оси каждого гибкая линия.
Свойство align-items применяется ко всем контейнерам Flex и устанавливает выравнивание по умолчанию элементов flex вдоль поперечной оси каждая гибкая линия. align-self применяется ко всем элементам flex, позволяет переопределить это выравнивание по умолчанию для отдельных элементов flex.
Свойство align-content применяется только к контейнерам с несколькими линиями и выравнивает гибкие линии внутри контейнера flex, когда это дополнительное пространство в поперечной оси.

Здесь у вас есть фрагмент для воспроизведения:

var form = document.forms[0],
    flex = document.getElementById('flex');
form.addEventListener('change', function() {
  flex.style.flexDirection = form.elements.fd.value;
  flex.style.justifyContent = form.elements.jc.value;
  flex.style.alignItems = form.elements.ai.value;
  flex.style.alignContent = form.elements.ac.value;
});

ul {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  list-style: none;
}
li {
  padding: 0 15px;
}
label {
  display: block;
}
#flex {
  display: flex;
  flex-wrap: wrap;
  height: 240px;
  width: 240px;
  border: 1px solid #000;
  background: yellow;
}
#flex > div {
  min-width: 60px;
  min-height: 60px;
  border: 1px solid #000;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
#flex > .big {
  font-size: 1.5em;
  min-width: 70px;
  min-height: 70px;
}

<form>
  <ul>
    <li>flex-direction
      <label><input type="radio" name="fd" value="row" checked /> row</label>
      <label><input type="radio" name="fd" value="row-reverse" /> row-reverse</label>
      <label><input type="radio" name="fd" value="column" /> column</label>
      <label><input type="radio" name="fd" value="column-reverse" /> column-reverse</label>
    </li>
    <li>justify-content
      <label><input type="radio" name="jc" value="flex-start" checked /> flex-start</label>
      <label><input type="radio" name="jc" value="flex-end" /> flex-end</label>
      <label><input type="radio" name="jc" value="center" /> center</label>
      <label><input type="radio" name="jc" value="space-between" /> space-between</label>
      <label><input type="radio" name="jc" value="space-around" /> space-around</label>
    </li>
    <li>align-items
      <label><input type="radio" name="ai" value="flex-start" /> flex-start</label>
      <label><input type="radio" name="ai" value="flex-end" /> flex-end</label>
      <label><input type="radio" name="ai" value="center" /> center</label>
      <label><input type="radio" name="ai" value="baseline" /> baseline</label>
      <label><input type="radio" name="ai" value="stretch" checked /> stretch</label>
    </li>
    <li>align-content
      <label><input type="radio" name="ac" value="flex-start" /> flex-start</label>
      <label><input type="radio" name="ac" value="flex-end" /> flex-end</label>
      <label><input type="radio" name="ac" value="center" /> center</label>
      <label><input type="radio" name="ac" value="space-between" /> space-between</label>
      <label><input type="radio" name="ac" value="space-around" /> space-around</label>
      <label><input type="radio" name="ac" value="stretch" checked /> stretch</label>
    </li>
  </ul>
</form>
<div id="flex">
  <div>1</div>
  <div class="big">2</div>
  <div>3</div>
  <div>4</div>
  <div class="big">5</div>
  <div>6</div>
</div>

Ответ 2

Сначала вам нужно понять, как работает структура Flexible box. Ниже изображение является частью Cheatsheet

Flexbox Структура

Flexbox был создан для адаптации как строки, так и столбца.

Основная ось:

Когда направление гибкости является строкой: ось х, как на графике, Когда направление сгиба - столбец: ось y на графике

Поперечная ось:

Когда направление flex - столбец: ось x, как на графике, Когда направление гибкости является строкой: ось y на графике

Justify-контента

justify-content используется для выравнивания элементов вдоль main-axis.

.justify-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;
}
.box {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class="justify-content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>