Css content align: align-content — CSS: Cascading Style Sheets

Я просмотрел их в своем браузере.

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

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

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

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

Прочитав некоторые ответы, они правильно определили, что align-content не влияет, если содержимое flex не упаковано. Однако чего они не понимают, так это того, что align-items по-прежнему играет важную роль, когда есть обернутое содержимое:

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

Пример 1:

 выравнивание содержимого: flex-start;
 

Пример 2:

 align-content: flex-end;
 

Вот код:

 

    <дел>1
    <дел>2
    <дел>3
    <дел>4
    <дел>5
    <дел>6
    <дел>7
    <дел>8
    <дел>9
    <дел>10
    
11
    <дел>12

<стиль>
.контейнер {
    дисплей: гибкий;
    ширина: 300 пикселей;
    flex-flow: перенос строк;
    выравнивание содержимого: пробел между;
    выравнивание элементов: по центру;
    выравнивание содержимого: flex-end;
    фон: светло-серый;
    высота: 400 пикселей;
}
. ребенок {
    отступ: 12px;
    фон: красный;
    граница: сплошная черная 1px;
}

 

0

align-content

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

6 равно

6) из кратных строк относительно друг друга.

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

align-items

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

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

align-items распределяет дочерние элементы по вертикали с интервалом между ними.

align-content объединяет их вместе, как если бы они были одним элементом.

(если flex-направление — столбец)

1

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

.

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

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

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

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

 .container {
  выравнивание содержимого: flex-start | гибкий конец | центр | пространство между | пространство вокруг | пространственно-равномерно | растянуть | начать | конец | базовый | первый базовый | последний базовый уровень + . .. безопасный | небезопасно;
}
 

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

 .контейнер {
  элементы выравнивания: растянуть | гибкий старт | гибкий конец | центр | базовый | первый базовый | последний базовый | начать | конец | самозапуск | самоконец + ... безопасный | небезопасно;
}
 

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

Ключевое свойство flex-wrap . Когда вместо (или когда на поперечной оси нет дополнительного пространства), align-content не действует. Когда wrap или wrap-reverse , это всегда имеет эффект ( независимо от количества строк ), если на поперечной оси есть дополнительное пространство.

Сравните эти четыре поля:

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

Это результат, который мы получаем от

 align-content:center;
 

1

Первая часть

align-items применяется только к одной строке полей. Предположим, внутри контейнера в одной строке стоят 4 ящика. затем будет применено align-items для выравнивания этих блоков в одну строку. Если flex-direction равно row (что по умолчанию), то align-items расположит блоки вертикально, если его столбец, то расположит блоки горизонтально.

Вторая часть

Продолжая описанную выше единственную строку ящиков, если мы добавим еще одну строку из 4 ящиков, теперь будет 8 ящиков, по 4 в каждой строке. Здесь появляется align-content , если мы применим align-content к контейнеру, он будет применен к обеим строкам, имеющим всего 8 блоков. Если мы применим align-content:center , обе строки будут центрированы в контейнере.