CSS3 flex弹性盒模型布局（二）

一.交叉轴上的对齐方式:align-items

1.交叉轴的起点对齐

ul{
    display:flex;
    justify-content:space-between;//主轴方向两端对齐
    align-items:flex-start;//交叉轴起点对齐
}

2.交叉轴的终点对齐

可做柱状图

3.交叉轴的居中对齐

二.项目换行

1. flex-wrap:wrap;
   如果子元素总宽度大于父级元素宽度，那么就一行能放多少就放多少，放不下的就被挤到下一行。
2. flex-wrap:wrap-reverse;第一行在最下面

第一行在最下面

三.多根轴线的对齐方式align-content

• 指定多行在交叉轴上的对齐方式

1. align-content:flex-start与交叉轴的起点对齐

2. align-content:space-between

3. align-content:space-around