Разница между выравниванием-выравниванием и выравниванием элементов?

Мне очень трудно понять, в чем разница? Из моих исследований кажется, что justify-content может делать... space-between и space-around, а align-items может... stretch, baseline, initial и inherit?

Также выглядит как общий ресурс, flex-start, flex-end и center.

Есть ли и преимущества/преимущества использования одного над другим или это просто предпочтение? Я чувствую, что они похожи на то же самое, что кто-то знает разницу? благодарю!!

ОТВЕТЫ

Ответ 1

Примечание:

Направление оси X и Y может меняться в зависимости от того, используете ли вы flex-direction: строку или столбец strong >

1. justify-content: Горизонтальный

Выравнивание и интервал вдоль первичной оси (ось X)

flex-start; Выравнивание по горизонтали слева

flex-end; Выравнивание по горизонтали по горизонтали

center; Выровняйте детей по горизонтали (поразите!)

space-between; Распределять дочерние элементы по горизонтали равномерно по всей ширине

space-around; Распределять дочерние элементы по горизонтали равномерно по всей ширине (но с пространством по краям

2. align-items: Вертикальный

Выравнивание только вдоль вторичной оси (ось Y)

flex-start; Выравнивание по вертикали сверху

flex-end; Выравнивание детей по вертикали внизу

center; Выравнивание по вертикали по центру (изумление!)

baseline; Построенные дети вертикально, поэтому их исходные линии выравниваются (на самом деле не работают)

stretch; Принудите детей быть высотой контейнера (отлично подходит для столбцов)

Смотрите в действии:

http://codepen.io/enxaneta/full/adLPwv/

По-моему:

Они должны были быть названы:

flex-x: влево или вправо или в центре или растянуть или пробел между или вокруг круга

flex-y: влево или вправо или в центре или растянуть

Но с html у вас никогда не будет приятных вещей. Никогда.