Мне очень трудно понять, в чем разница? Из моих исследований кажется, что justify-content может делать... space-between и space-around, а align-items может... stretch, baseline, initial и inherit?
Также выглядит как общий ресурс, flex-start, flex-end и center.
Есть ли и преимущества/преимущества использования одного над другим или это просто предпочтение? Я чувствую, что они похожи на то же самое, что кто-то знает разницу? благодарю!!
Направление оси X и Y может меняться в зависимости от того, используете ли вы flex-direction: строку или столбец strong >
justify-content: Горизонтальный flex-start; Выравнивание по горизонтали слева
flex-end; Выравнивание по горизонтали по горизонтали
center; Выровняйте детей по горизонтали (поразите!)
space-between; Распределять дочерние элементы по горизонтали равномерно по всей ширине
space-around; Распределять дочерние элементы по горизонтали равномерно по всей ширине (но с пространством по краям
align-items: Вертикальный flex-start; Выравнивание по вертикали сверху
flex-end; Выравнивание детей по вертикали внизу
center; Выравнивание по вертикали по центру (изумление!)
baseline; Построенные дети вертикально, поэтому их исходные линии выравниваются (на самом деле не работают)
stretch; Принудите детей быть высотой контейнера (отлично подходит для столбцов)
http://codepen.io/enxaneta/full/adLPwv/
Они должны были быть названы:
flex-x: влево или вправо или в центре или растянуть или пробел между или вокруг круга
flex-y: влево или вправо или в центре или растянуть
Но с html у вас никогда не будет приятных вещей. Никогда.