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-й блок и все остальные блоки в первой строке заменяются на вертикально центрированные в этой строке.
Обратите внимание, что align-*свойства также могут смещать элементы Flex по горизонтали. Это зависит от flex-direction. stackoverflow.com/q/32551291/3597276
Майкл Бенджамин
1
Это легко лучшее объяснение. Все остальные терпят неудачу.
ортономия
> «Но align-content предназначен для многострочных гибких блоков. Он не действует, когда элементы находятся в одной строке» - это, похоже, не соответствует действительности или не учитывается в последней версии Firefox (май 2020 г.). Вместо этого, если есть одна гибкая линия (все содержимое помещается в пределах меньше, чем длина главной оси), которая меньше полной высоты (размер поперечной оси меньше, чем полная доступная), то метод align-content, если установлен , уничтожит функцию align- Предметы. Это имеет смысл: это относится к ЛЮБЫМ строкам, которые он находит?
Это займет у вас 10-20 минут, а на уровне 21 вы найдете ответ на свой вопрос. Это упомянуло:
align-content определяет интервал между строками, а align-items
определяет, как элементы в целом выровнены внутри контейнера. Когда есть только одна строка, align-content не имеет никакого эффекта
Действительно, я нашел лягушачий пример действительно полезным. Из этого многому научился.
Spikatrix
63
Во-первых, align-itemsдля предметов в одном ряду. Таким образом, для одного ряда элементов на главной оси ,align-items выровняйте эти элементы друг относительно друга, и это начнется с новой перспективы со следующего ряда.
Теперь align-contentне мешает элементам подряд, а самим строкам . Следовательно,align-content постараемся выровнять строки относительно друг друга и согнуть контейнер.
У меня было такое же замешательство. После некоторой обработки, основанной на многих ответах выше, я наконец могу увидеть различия. По моему скромному мнению, различие лучше всего продемонстрировать с помощью гибкого контейнера, который удовлетворяет следующим двум условиям:
Сам гибкий контейнер имеет ограничение по высоте (например, min-height: 60rem) и, таким образом, может стать слишком высоким для его содержимого
Дочерние элементы, заключенные в контейнер, имеют неравномерную высоту
Условие 1 помогает мне понять, что contentозначает относительно его родительского контейнера. Когда содержимое заполнено контейнером, мы не сможем увидеть какие-либо эффекты позиционирования align-content. Только когда у нас есть дополнительное пространство вдоль поперечной оси, мы начинаем видеть его эффект: он выравнивает содержимое относительно границ родительского контейнера.
Условие 2 помогает мне визуализировать эффекты align-items: оно выравнивает элементы относительно друг друга.
<divclass="flex-container"><divclass="item">Short</div><divclass="item">Longerrrrrrrrrrrrrr</div><divclass="item">💩</div><divclass="item"id="tall">This is Many Words</div><divclass="item">Lorem, ipsum.</div><divclass="item">10</div><divclass="item">Snickers</div><divclass="item">Wes Is Cool</div><divclass="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-contentуправляет перекрестной осью (то есть вертикальным направлением, если flex-directionесть row, и горизонтальной, если flex-directionесть column) позиционированием нескольких линий относительно друг друга .
(Представьте, что строки абзаца расположены вертикально, сложены сверху, сложены снизу. Это flex-directionпарадигма строк).
ALIGN-элементы
align-items управляет поперечной осью отдельной линии гибких элементов.
(Подумайте, как выровняется отдельная строка абзаца, если она содержит какой-то обычный текст и какой-то более высокий текст, например математические уравнения. В этом случае это будет низ, верх или центр каждого типа текста в строке, которая будет быть выровненным?)
когда вы используете align-item или justify-item, вы настраиваете "содержимое внутри элемента сетки вдоль оси столбца или оси строки соответственно.
Но: если вы используете align-content или justify-content, вы устанавливаете положение сетки вдоль оси столбца или оси строки. это происходит, когда у вас есть сетка в большем контейнере, а ширина или высота негибки (с использованием px).
Ответы:
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.
источник
align-*
свойства также могут смещать элементы Flex по горизонтали. Это зависит отflex-direction
. stackoverflow.com/q/32551291/3597276Я считаю пример http://flexboxfroggy.com/ очень полезным.
Это займет у вас 10-20 минут, а на уровне 21 вы найдете ответ на свой вопрос. Это упомянуло:
источник
Во-первых,
align-items
для предметов в одном ряду. Таким образом, для одного ряда элементов на главной оси ,align-items
выровняйте эти элементы друг относительно друга, и это начнется с новой перспективы со следующего ряда.Теперь
align-content
не мешает элементам подряд, а самим строкам . Следовательно,align-content
постараемся выровнять строки относительно друг друга и согнуть контейнер.Проверьте эту скрипку: https://jsfiddle.net/htym5zkn/8/
источник
У меня было такое же замешательство. После некоторой обработки, основанной на многих ответах выше, я наконец могу увидеть различия. По моему скромному мнению, различие лучше всего продемонстрировать с помощью гибкого контейнера, который удовлетворяет следующим двум условиям:
min-height: 60rem
) и, таким образом, может стать слишком высоким для его содержимогоУсловие 1 помогает мне понять, что
content
означает относительно его родительского контейнера. Когда содержимое заполнено контейнером, мы не сможем увидеть какие-либо эффекты позиционированияalign-content
. Только когда у нас есть дополнительное пространство вдоль поперечной оси, мы начинаем видеть его эффект: он выравнивает содержимое относительно границ родительского контейнера.Условие 2 помогает мне визуализировать эффекты
align-items
: оно выравнивает элементы относительно друг друга.Вот пример кода. Исходные материалы взяты из руководства Уэса Боса по CSS Grid (21. Flexbox против CSS Grid)
Пример 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
align-items для элементов в строке Свойства align-items
Для получения дополнительной информации посетите Flex
источник
Главное отличие в том, что высота элементов не одинакова! Тогда вы можете увидеть, как в строке все они центр \ конец \ начало
источник
в соответствии с тем, что я понял отсюда :
когда вы используете align-item или justify-item, вы настраиваете "содержимое внутри элемента сетки вдоль оси столбца или оси строки соответственно.
Но: если вы используете align-content или justify-content, вы устанавливаете положение сетки вдоль оси столбца или оси строки. это происходит, когда у вас есть сетка в большем контейнере, а ширина или высота негибки (с использованием px).
источник