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