#今日说码栏目#第二十集 弹性盒子

1、flex(弹性盒子，别名：伸缩盒)

    -是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局

    -flex可以使元素具有弹性，让元素可以根据页面的大小的改变而改变

    -弹性容器

    -要使用弹性盒，必须先将一个元素设置为弹性容器

    -通过display来设置弹性容器

          display:flex  设置块级弹性容器

          display:inline-flex 设置为行内的弹性容器

    -弹性元素

      -弹性容器的直接子元素是弹性元素（弹性项）

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

一:弹性容器的属性

    1:flex-direction       2:flex-wrap

    3:flex-flow              4:justify-content(最常用)

    5:align-items          6:align-content

1:flex-direction: ; 指定容器中弹性元素的排列方式

    可选值：

    row  默认值，弹性元素在容器中水平排列（左向右）

          主轴-自左向右

    row-reverse  弹性元素在容器中反向水平排列（右向左）

          主轴-自右向左

    column  弹性元素纵向排列（自上向下）

         主轴-自上向下

     column-reverse 弹性元素纵向排列（自下向上）

         主轴-自下向上

    主轴：弹性元素的排列方向称为主轴

    侧轴：与主轴垂直方向的称为侧轴

2、弹性容器的属性

1: flex-direction: ;设置方向

2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行

    可选值：

        nowrap 默认值，元素不会自动换行

        wrap 元素沿着辅轴方向自动换行  

        wrap-reverse 元素沿着辅轴反方向换行  

3:flex-flow:wrap和direction的简写属性，且没有顺序要求

        默认值 row  nowrap

4:justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）

    可选值：

        flex-start           元素沿着主轴起边排列

        flex-end            元素沿着主轴终边排列

        center               元素居中排列

        space-around   空白分布到元素的两侧

        space-between  空白均匀分布到元素间

        space-evenly     空白分布到元素的单侧（兼容性差一些）

3、弹性容器的属性

       1: flex-direction: row;

       2:flex-wrap:wrap-reverse;

       3: flex-flow:row wrap;

       4: justify-content:space-around;

      5: align-items 在辅轴上如何对齐-元素间的关系

        可选值：

            stretch      默认值，将同一行元素的长度设置为相同的值

            flex-start  元素不会拉伸， 沿着辅轴起边对齐

            flex-end   元素不会拉伸， 沿着辅轴终边对齐

            center      居中对齐

            baseline  基线对齐（用的不对）

  6: align-content: ;辅轴空白空间的分布

        可选值：

            flex-start 元素沿着辅轴起边排列

            flex-end 元素沿着辅轴终边排列

            center  元素居中排列

            space-around 空白分布到元素的两侧

            space-between 空白均匀分布到元素间

            space-evenly 空白分布到元素的单侧（兼容性差一些）

需求：在弹性盒子里，元素时间正中间居中对齐

            justify-content: center;        

            align-items: center;

4、弹性容器的属性

1、order：定义项目的排列顺序。数值越小，排列越靠左前前，默认为0，优先显示出来。

2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。

  浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，

        即项目的本来大小。

5、flexflex：属性是flex-grow, flex-shrink 和 flex-basis的简写，

        默认值为0 1 auto。后两个属性可选。

6、align-self：允许单个项目有与其他项目不一样的对齐方式，

        可覆盖align-items属性。默认值为auto。

        表示继承父元素的align-items属性，如果没有父元素，

        则等同于stretch。