CSS3弹性布局

       传统的布局,基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局实现起来比较麻烦，就比如垂直居中，伸缩等。实现起来就不是很容易。

        弹性布局是CSS3一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐，伸缩和分配空白空间。

1，开启弹性布局flex

    
    
    


    

        
1
        
2
        
3
    

打开页面可以看到元素从左往右进行的正常排列,顺序为1，2，3

总结

    1，开启了flex的元素，就是弹性布局；
    2，给元素设置: display:flex或 display:inline-flex，该元素就变为了弹性布局;
    3，无论原来是哪种元素(块、行内块、行内)，一旦开启了flex布局，全都会“块状化”";
    4，弹性布局只能对一级子元素有效，如果是孙子元素或者是孙子的孙子元素不起任何作用;
    5，display:inline-flex很少使用，因为可以给多个父容器设置;

2，主轴和侧轴

容器默认存在两根轴：水平的主轴和垂直的交叉轴，项目默认沿主轴排列。

    
    
    



    
1
    
2
    
3

放开注释可以看到元素不同的排列方式

总结：

1.主轴与侧轴
    ·主轴:弹性布局沿着主轴排列,主轴默认是水平的从左到右(左边是起点，右边是终点，可以称之为x轴)。
    .侧轴:与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是:从上到下(上边是起点，下边是终点.可以称之为y轴)。
2.主轴方向
    ·修改主轴的属性(默认值):flex-direction常用值如下:
    1. row :主轴方向水平从左到右-―默认值
    2. row-reverse:主轴方向水平从右到左。
    3. column :主轴方向垂直从上到下。
    4. column-reverse :主轴方向垂直从下到上。
    注意:改变了主轴的方向，侧轴方向也随之改变。

3，主轴换行flex-wrap

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
8
    
10
    
11

总结：主轴换行主要使用属性flex-wrap

1，wrap作用：让元素正常排列，多出的自动换行；

1，wrap-reverse作用：让元素从下往上，从左往右进行排列；

4，flex-flow

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
8
    
10
    
11

flex-flow是一个复合属性，结合了 flex-direction和flex-wrap两个属性 用的比较少。

5，主轴的对齐方式justify-content

    
    
    



    
1
    
2
    
3

justify-content·常用值如下:
1. flex-strt:主轴起点对齐。—―默认值
2. flex-end:主轴终点对齐。
3. center :居中对齐
4. space-between:均匀分布，两端对齐(最常用)。
5. space-around :均匀分布，两端距离是中间距离的一半。
6. space-evenly :均匀分布，两端距离与中间距离一致。

6，侧轴的对齐方式一行align-items

    
    
    



    
1
    
2
    
3

所需属性: align-items。只适用于只有一行的情况
常用值如下:
1. flex-start 起点对齐。
2. flex-end :终点对齐。
3. center :中点对齐。
4. baseline:基线对齐。
5. stretch: 没有高度的时候有效 拉伸到父容器的高度

7，侧轴的对齐方式多行align-content

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11

所需属性: align-content常用值如下:
1.flex-stat :与侧轴的起点对齐。
2. flex-end :与侧轴的终点对齐。
3. center :与侧轴的中点对齐。
4. space-between :与侧轴两端对齐，中间平均分布。
5. space-around :伸缩项目间的距离相等，比距边缘大一倍。
6. space-evenly :在侧轴上完全平分。
7. stretch :占满整个侧轴。—―默认值

8，元素水平垂直居中-两种方式

    
    
    



    
1

9，基准长度flex-basic

    
    
    



    
1
    
2
    
3

概念: flex-basis设置的主轴方向的基准长度会让宽度或高度失效。
    备注:主轴横向:宽度失效;主轴纵向:高度失效
    作用:浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，即:伸缩项目的宽或高。

10，弹性布局之拉伸flex-grow

父元素的宽度增加，子元素的宽度也会随之增加，并进行一定比较的分配。

    
    
    



    
1
    
2
    
3

概念: 
        flex-grow 定义伸缩项目的放大比例，默认为1，即:纵使主轴存在剩余空间，也不拉伸(放大)
规则:
        1，若所有伸缩项目的 flex-grow值都为1，如果它们有空间的话，按等分进行空间的分配。
        2，如果单独设置flex-grow，则根据计算规则进行分配。

11，弹性布局之压缩flex-shrink

        父元素的宽度减小，子元素的宽度也会随之减小，并进行一定比较的分配。

    
    
    



    
1
    
2
    
3

概念: flex-shrink定义了项目的压缩比例，默认为1。如果空间不足，该项目将会缩小。
注意：如果压缩到一定的程度，则以里面的子元素作为最小的单位进行展示,例如子元素里面有一个div的元素宽和高分别为50，则它压缩的最低宽度不会小于50

12，复合属性的使用-flex

    
    
    



    
1
    
2
    
3

flex复合属性的用法
flex是复合属性，复合了: flex-grow , flex-shrink . flex-basis三个属性，默认值为0 1 auto
1，如荣写flex:1 1 auto ，则可简马为:flex:auto
2，如果写flex:1 1 0，则可简写为:flex : 1
3，如果写flex:0 0 auto ，则可简写为:flex : none
4，如果写flex:0 1 auto ，则可简写为: flex:0 auto ——即flex初始值。

13，项目排序和对齐align-self

    
    
    



    
1
    
2
    
3

align-self属性常用的有3个
1，flex-start 起点对齐
2，center  居中对齐
3，flex-start:终点对齐

14，综合练习

完结。