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

一.两层元素：父级-容器 子级-项目

二.基本概念

1. 弹性盒模型容器中的项目默认在主轴上排列

ul中li元素正常来讲是垂直排列的，但如果给予ul{display:flex},ul中的li自动在主轴上（水平）排列，省去了float:left操作

2. 子元素默认都排列在主轴上，不换行

3. 如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度；

4. 如果项目总宽度大于容器宽度，那么子元素就均分容器宽度（注意：当主轴为垂直方向时，如果设置了行高，会把高度强行撑开，就无法均分了），设置宽度无效。

三.flex-direction主轴方向

1. 主轴和交叉轴永远是垂直的

ul{
    display:flex;
    flex-direction:row-reverse;
}

四.主轴上的排列方式

1.justify-content

display:flex;
justify-content:flex-end;

右对齐

display:flex;
justify-content:space-around;

display:flex;
justify-content:space-between;

两端对齐