В чем разница между align-items и flex-direction в CSS?

Разница между align-items и flex-direction в CSS заключается в их функциях.

Flex-direction управляет направлением главной и поперечной осей, по которым располагаются flex-элементы. itchief.ru skillbox.ru Свойство определяет порядок и направление расположения flex-элементов. itchief.ru Некоторые возможные значения:

• row — элементы располагаются по горизонтали слева направо (значение по умолчанию); itchief.ru css.yoksel.ru
• row-reverse — элементы располагаются по горизонтали справа налево; itchief.ru
• column — элементы располагаются по вертикали сверху вниз; itchief.ru
• column-reverse — элементы располагаются по вертикали снизу вверх. itchief.ru

Align-items, в свою очередь, отвечает за выравнивание элементов по поперечной оси внутри ряда (невидимой строки). wp-kama.ru Свойство устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. html5book.ru Некоторые возможные значения align-items:

• flex-start — элементы выравниваются по верхнему краю контейнера; skillbox.ru
• flex-end — элементы выравниваются по нижнему краю контейнера; skillbox.ru
• center — содержимое контейнера выравнивается по центру; skillbox.ru
• baseline — элементы выравниваются по базовой линии текста, который в них содержится; skillbox.ru
• stretch — внутренние элементы растягиваются на всю высоту flex-контейнера. skillbox.ru