Flex布局

Flex布局的概念

1、flexible box：弹性盒装布局        2、容器控制内部元素的布局定位
3、css3引入的新布局模型            4、伸缩元素，自由填充，自适应

使用Flex布局的优势

1、可在不同方向屁排列元素        2、控制元素排序的方向
3、控制元素的对齐方式            4、控制元素之间等距
5、控制单个元素放大与缩放比例、占比、对齐方式

Flex布局的常用术语

1、flex container：flex容器        2、flex item：flex项目（元素）
3、flex direction：布局方向

Flex布局的模型

Flex容器的属性
1、flex direction：设置元素的排序方向
    row（从左向右）        row-reverse（从右向左）
    column（从上到下）    column-reverse（从下到上）

2、flex-wrap：使容器内的元素换行
    nowrap（元素不会换行）    wrap（当元素超过行范围会到第二行）
    wrap-reverse（逆向换行排序）

3、justify-content：设置元素在主轴上的对齐方式
    flex-start（左对齐）    flex-end（右对齐）
    center（居中）
    space-between（两端对齐，元素之间平均等分剩余空白间隙部分）
    space-around（元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1:2）

4、align-items：设置元素在交叉轴上的对齐方式
    flex-start（左对齐）    flex-end（右对齐）
    center（居中）
    baseline（保证元素中的文字在同一条基准线（保证每个文字都在同一条线上））        
    stretch（默认）

5、align-content：设置轴线的对齐方式（轴线当做元素）
    flex-start（左对齐）    flex-end（右对齐）
    center（居中）        stretch
    space-between        space-around

Flex元素的属性
1、order：控制元素顺序
2、flex-grow：控制元素放大比例
3、flex-shrink：控制元素缩小比例
4、flex-basis：设置元素固定或自动空间的占比
5、align-self：重写align-item父属性