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时，注意方向的变化