Какая разница между выравниванием и выравниванием элементов?

Ответ 1

Свойство align-items flex-box выравнивает элементы внутри гибкого контейнера вдоль поперечной оси, точно так же, как 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-й ящик, и все остальные поля в первой строке меняют вертикально в эту строку.

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

Я нахожу пример http://flexboxfroggy.com/ очень полезным.

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

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

Ответ 5

в соответствии с тем, что я понял из здесь:

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

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

Ответ 6

выравнивать-содержание

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

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

ALIGN-деталь

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

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

Ответ 7

Основное различие заключается в том, что высота элементов не одинакова! Затем вы можете увидеть, как в строке все они находятся в центре\end\start