弹性盒子，一次性全部搞懂！前端面试经常问到

一、基本概念：

弹性布局（display:flex），用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，在设置Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、属性

       六个属性分别为：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

        1.flex-direction:决定主轴的方向，即排列方向按照行还是列。默认为row（行）

flex-direction:  column-reverse |column |row | row-reverse ;

       

               row(默认值)：主轴为水平方向，起点在左端

               row-reverse：主轴为水平方向，起点在右端

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

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

        2.flex-wrap：自动换行，弹性盒子默认是在一行，根据窗口放大缩小自动收缩，设置该属性后，项目会固定大小不变，放不下自动换行。

flex-wrap: nowrap | wrap | wrap-reverse;

        a. nowrap：默认值：不换行

        b. wrap:换行，第一行的在上面

        c.wrap-reverse:换行，第一行的在下方

      

 3.flex-flow：该属性是flex-direction和flex-wrap书香的简写形式，默认值是row，nowrap

4.justify-content：该属性定义了项目在主轴上的对齐方式(默认是flex-start左对齐)

justify-content: flex-start | flex-end | center | space-between | space-around;

  a.flex-start(默认值左对齐):

   b.flex-end:右对齐

 c.center:水平居中

d.space-between:两端对齐，项目之间的间隔都相等

 e.space-around：每个项目之间间隔相等，所以项目之间间隔比项目与边框的间隔大一倍

 5.align-items属性：竖轴也就是列上面的对齐方式（默认为stretch）

align-items: flex-start | flex-end | center | baseline | stretch;
}

        a.flex-start / flex-end: 上对齐和下对齐

        b.center：：垂直方向居中对齐

                                 

        c.baseline:项目的第一行文字的基线对齐

        d.stretch：默认值；如果项目未设置高度或设为auto，将占满整个容器的高度 

                       

6.align-content属性：如果只有一行的flex元素，该属性无效（默认为stretch）

   a.flex-start / flex-end：上对齐和下对齐

   b.center：居中对齐

   c.space-between:l两端对齐，轴线之间的间隔平均分布

   d.space-around：两行（轴线）之间间隔都相等，所以轴线之间间隔比轴线与边框的间隔大一倍

   e.stretch：默认值，轴线占满整个纵轴

 7.align-items与align-items区别

     通常说单行用align-items，多行用align-content，是针对flex-direction：row来说的

        a.如果排列方式为行，（flex-direction：row），并且设置了自动换行后有多行，这个时候用align-items就失效了，需要设置align-content

        b.如果排列方式为列，多列的时候align-items失效，需要设置align-content才有效

本文参考https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html