弹性布局（弹性盒子）

1.弹性盒子是用来代替浮动的页面布局

                       

2.弹性容器：开启弹性盒子的那个元素。开启弹性盒子用display：flex

3.弹性元素：弹性容器的直接⼦元素是弹性元素

4.块元素开启弹性盒子：display:flex； ，

   行内元素开启弹性盒子： display:inline-flex；

注意：一个元素可以同时是弹性容器和弹性元素

5.弹性容器默认有两条轴，水平方向的叫主轴，垂直方向的叫测轴（辅轴）

6.弹性容器的属性（6个）

 (1).flex-direction : row;

     决定主轴的方向，属性值：

                          row （默认值）：主轴为⽔平⽅ 向，起点在左 端。

                          row-reverse ：主轴为⽔平⽅向， 起点在右端。

                          column ：主轴为 垂直⽅向，起点 在上沿。

                          column-reverse ：主轴为 垂直⽅向，起点 在下沿。 

(2).flex-wrap: nowrap;

      决定一条轴线排不下是否换行，属性值：

                          nowrap（默认值）：不换行。

                          wrap：换行。

                          

        注意：如果不换行就会自动调节弹性元素的宽度，使其能刚好一行

(3).justify-content: flex-start;

             觉得了主轴上的元素对齐方式，属性值：

                            flex-start（默认值）：左对⻬。

                           flex-end：右对⻬。

                           center： 居中。

                            space-between ：两端对⻬，项⽬之间的间隔都相等。

                            space-around ： 每个项⽬两侧的 间隔相等。所以，项⽬之间的间隔⽐项⽬与边                                                       框的间隔⼤⼀ 倍。

                           

                            space-evenly : 项⽬是分布 的，以便任何 两个项⽬之间 的间距（和边 缘的空                                                            间）相 等

  (4).align-items: flex-start;

           决定了在辅轴上的排列方式，在子项为单行的时候使用，属性值：

                            flex-start ：辅轴 的起点对⻬。

                            flex-end ：辅轴的终点对⻬。

                            center ：辅轴的 中点对⻬。

                            baseline : 项⽬的 第⼀⾏⽂字的基 线对⻬。

                            stretch （默认值）：如果项⽬未设置⾼度或设 为auto，将占满 整个容器的⾼度

  (5).align-content: flex-start;

            决定了 多根轴线的 对⻬⽅式（⼦项出 现换⾏的情况） 如果项⽬只有⼀根 ，该属性不起 作⽤。

                 属性值：

                               flex-start ：与辅轴 的起点对 ⻬。

                              flex-end ：与辅轴的终点对⻬。

                              center ：与辅轴的中点对⻬。

                              space-between ：与辅轴两端对⻬，轴 线之间的间隔平均分布。

                              space-around ： 每根轴线两侧的 间隔都相等。所 以，轴线之间的 间隔⽐轴                                                               线与边 框的间隔⼤⼀倍。

                              stretch （默认 值）：轴线占满 整个辅轴。

、

(6).flex-flow: row nowrap;

            是flex-direction属 性和flex-wrap属 性的简写形式，默 认值为row   nowrap

7.弹性元素的属性（6个）：

  (1). order: 1;

          决定元素的 排列顺 序。数值越⼩，排 列越靠前，默认为 0

       

  (2).flex-grow: 1; （把剩余的空间的比例平分）

           决定元素的放大比例， 默认为0，即 如果存在剩余空 间，也不放⼤。

          

     变法：把剩余的空间分四份，给不同的元素不同的份额比例

     

    

  (3).flex-shrink: 1;

           决定了元素的 缩⼩ ⽐例，默认为1， 即如果空间不⾜， 项⽬将缩⼩。

     

     eg：这里我们将宽度改成200，得到的元素实际宽度只有166.66就是因为等比例缩小了

              扩展用法与放大相同、

(4).align-self: flex-end;

        可以使某个元素和其他元素有不一样的对齐方式， 可覆盖 align-items属性。 默认值为auto，                  表  示继承⽗元素的 align-items属性

       属性值： auto | flex- start | flex-end | center | baseline | stretch ;

(5). flex-basis ：auto；

           定义了在分配多余 空间之前，项⽬占 据的主轴空间（main size）。浏 览器根据这个属 性，                  计 算主轴是否 有多余空间。它的 默认值为auto，即 项⽬的本来⼤⼩。

(6). flex：0 1 auto；

          flex属性是flex grow, flex-shrink 和 flex-basis的简 写，默认值为0 1 auto。 后两个属性 可选。

                  定义了⼦项⽬分配 剩余空间 ，flex表 示占 多少份数