justify-content与align-items解析

justify-content
justify-content是flex布局中的一个属性，用来调整container中的items布局

flex-start (default): 每个item从起点开始依次排布
flex-end: 每个item从尾部开始依次向起点排布
center: items沿中心排布
space-between: items从左到右依次排布，第一个item在起点，最后一个item在终点
space-around: items从左到右间隔相同距离排布
space-evenly: items从左到右任意连个相邻item的距离与第一个item距起点的距离以及最后一个item距终点的距离都相等
从上到下效果如图：

align-items
align-item与justify-content相似，也具有多个属性值

flex-start: 每个item上边缘沿着container的上边缘线分布
flex-end: 每个item下边缘沿着container的下边缘线分布
center: 每个item沿着container的水平中心线分布
baseline: 每个item沿着它们的基准线分布
stretch (default): 每个item延长自己至与container等高分布
从上到下效果如图

注意当flex-direction: colum时，注意方向的变化
————————————————
原文链接：https://blog.csdn.net/include_IT_dog/article/details/100065515