В чем разница между align-content и align-items?

Кто-нибудь может показать мне разницу между align-itemsи align-content?

align-itemsСвойство гибкой коробки выравнивает элементы внутри гибкой контейнера вдоль поперечной оси так же , как это justify-contentделает вдоль главной оси. (По умолчанию flex-direction: rowпоперечная ось соответствует вертикальной, а главная ось соответствует горизонтальной. С flex-direction: columnэтими двумя чередуются соответственно).

Вот пример того, как align-items:centerвыглядит:

Но align-contentдля многолинейных гибких коробок. Это не имеет никакого эффекта, когда элементы находятся в одной строке. Он выравнивает всю структуру в соответствии с ее стоимостью. Вот пример для align-content: space-around;:

А вот как align-content: space-around;с align-items:centerвнешностью:

Обратите внимание, что 3-й блок и все остальные блоки в первой строке заменяются на вертикально центрированные в этой строке.

Вот несколько ссылок codepen для игры:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Вот очень крутая ручка, которая показывает и позволяет играть практически со всем во flexbox.

Я считаю пример http://flexboxfroggy.com/ очень полезным.

Это займет у вас 10-20 минут, а на уровне 21 вы найдете ответ на свой вопрос. Это упомянуло:

align-content определяет интервал между строками, а align-items определяет, как элементы в целом выровнены внутри контейнера. Когда есть только одна строка, align-content не имеет никакого эффекта

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

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

Проверьте эту скрипку: https://jsfiddle.net/htym5zkn/8/

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

1. Сам гибкий контейнер имеет ограничение по высоте (например, min-height: 60rem) и, таким образом, может стать слишком высоким для его содержимого
2. Дочерние элементы, заключенные в контейнер, имеют неравномерную высоту

Условие 1 помогает мне понять, что contentозначает относительно его родительского контейнера. Когда содержимое заполнено контейнером, мы не сможем увидеть какие-либо эффекты позиционирования align-content. Только когда у нас есть дополнительное пространство вдоль поперечной оси, мы начинаем видеть его эффект: он выравнивает содержимое относительно границ родительского контейнера.

Условие 2 помогает мне визуализировать эффекты align-items: оно выравнивает элементы относительно друг друга.

Вот пример кода. Исходные материалы взяты из руководства Уэса Боса по CSS Grid (21. Flexbox против CSS Grid)

• Пример HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• Пример CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Пример 1 : Давайте сузим область просмотра так, чтобы содержимое находилось на одном уровне с контейнером. Это когда align-content: flex-start;не имеет эффекта, так как весь блок контента плотно помещается внутри контейнера (нет дополнительного места для перемещения!)

Также обратите внимание на 2-й ряд - посмотрите, как элементы выровнены по центру между собой.

Пример 2 : по мере того, как мы расширяем область просмотра, у нас больше не хватает содержимого, чтобы заполнить весь контейнер. Теперь мы начинаем видеть эффекты align-content: flex-start;--it выравнивает содержимое относительно верхнего края контейнера.

Эти примеры основаны на flexbox, но те же принципы применимы к сетке CSS. Надеюсь это поможет :)

Ну, я проверил их в моем браузере.

align-contentможет изменить высоту линии в направлении строки для ширины или для столбца , когда это значение равно растянуть, или добавить пустое пространство между или вокруг линий space-between, space-around, flex-start, flex-end values.

align-itemsМожно изменить высоту или положение элементов внутри области линии. Когда элементы не обернуты, у них есть только одна строка, ее область всегда растягивается до области flex-box (даже если элементы переполняются) и align-contentне влияет на одну строку. Таким образом, это не влияет на элементы, которые не обернуты, и align-itemsможет только изменять положение элементов или растягивать их, когда все они находятся на одной строке.

Однако, если они обернуты, у вас есть несколько строк и элементов внутри каждой строки. И если все элементы каждой линии имеют одинаковую высоту (для направления строки), то высота линии будет равна высоте этих элементов, и вы не увидите никакого эффекта при измененииalign-items значения.

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

ALIGN-контент

align-contentуправляет перекрестной осью (то есть вертикальным направлением, если flex-directionесть row, и горизонтальной, если flex-directionесть column) позиционированием нескольких линий относительно друг друга .

(Представьте, что строки абзаца расположены вертикально, сложены сверху, сложены снизу. Это flex-directionпарадигма строк).

ALIGN-элементы

align-items управляет поперечной осью отдельной линии гибких элементов.

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

Что я узнал из каждого ответа и посещения блога

что такое поперечная ось и главная ось

• главная ось - горизонтальный ряд, а поперечная ось - вертикальный столбец - для flex-direction: row
• главная ось - вертикальный столбец, а поперечная ось - горизонтальный ряд - для flex-direction: column

Теперь выровняйте содержимое и выровняйте элементы

align-content для строки, он работает, если контейнер имеет (более одной строки) свойства align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items для элементов в строке Свойства align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Для получения дополнительной информации посетите Flex

Главное отличие в том, что высота элементов не одинакова! Тогда вы можете увидеть, как в строке все они центр \ конец \ начало

в соответствии с тем, что я понял отсюда :

когда вы используете align-item или justify-item, вы настраиваете "содержимое внутри элемента сетки вдоль оси столбца или оси строки соответственно.

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