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

366

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

Динь
источник
3
Я уже выкопал «Альманах Криса», но все еще не понял
Динь
56
Имена выбора здесь так запутаны! просто кажется таким безрассудным называть такие вещи!
vsync
1
stackoverflow.com/q/42613359/3597276
Майкл Бенджамин

Ответы:

384

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

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

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.

Асим КТ
источник
3
Обратите внимание, что align-*свойства также могут смещать элементы Flex по горизонтали. Это зависит от flex-direction. stackoverflow.com/q/32551291/3597276
Майкл Бенджамин
1
Это легко лучшее объяснение. Все остальные терпят неудачу.
ортономия
> «Но align-content предназначен для многострочных гибких блоков. Он не действует, когда элементы находятся в одной строке» - это, похоже, не соответствует действительности или не учитывается в последней версии Firefox (май 2020 г.). Вместо этого, если есть одна гибкая линия (все содержимое помещается в пределах меньше, чем длина главной оси), которая меньше полной высоты (размер поперечной оси меньше, чем полная доступная), то метод align-content, если установлен , уничтожит функцию align- Предметы. Это имеет смысл: это относится к ЛЮБЫМ строкам, которые он находит?
Адам
85

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

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

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

Алиреза Фаттахи
источник
2
Действительно, я нашел лягушачий пример действительно полезным. Из этого многому научился.
Spikatrix
63

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

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

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

Uday Hiwarale
источник
19

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

  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. Надеюсь это поможет :)

Шань Доу
источник
11

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

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значение растяжения, чтобы расширить область линий.

TheNegative
источник
7

ALIGN-контент

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

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

ALIGN-элементы

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

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

ahnbizcad
источник
1

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

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

  • главная ось - горизонтальный ряд, а поперечная ось - вертикальный столбец - для 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

bajran
источник
0

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

Сей
источник
0

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

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

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

Goldenmoon
источник