Flex布局

1. Flex布局：通过对修改父元素div的diapaly属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素（项目）的排列方式。
2. Flex布局的优点：相对于传统的盒模型做法来说简单很多，修改父元素display:flex属性，其div效果会自动排列成一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float;随着浏览器的不断兼容以及对旧版本的淘汰，flex布局注定会成为更为流行的布局方案。
3. 盒模型：当并列书写多个div标签时，div标签会自动纵向向下排位，如果想将多个div标签并列成一排，必须调用position,float,或display属性，这便是传统的盒模型做法。
4. Flex布局属性主要有容器属性和项目属性两大类型构成。
5. 采用Flex布局的元素，称为Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）,简称“项目”。
6. 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
7. 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
8. 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
9. 容器属性：

（1）flex-direction属性：默认取值为row，用于控制项目排列方式与顺序，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

注意：  row（默认值）：主轴为水平方向，起点在左端。

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

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

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

    （2）flex-wrap属性：默认取值为nowrap，表示不换行，用于控制项目是否换行。而wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。Wrap-reverse同样表示换行，效果与wrap相反。

                 注意： nowrap 默认不换行。

wrap 换行第一行在上方。

wrap-reverse 换行第一行在下方。

    （3）flex-flow属性：flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

     （4）justify-content属性：默认取值为flex-star，用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

            注意：flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

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

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

space-evenly：为项目之间间距与项目与容器间距相等 很少用到

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

（5）align-items属性：默认取值为stretch, 用于控制项目在纵轴排列方式。如果项目没设置高度，或高度为auto，则占满整个容器的高度。

     注意： flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

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

      flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反。

      center会在纵轴中心位置排列。

      baseline比较特殊，它让项目以第一行文字的基线为参照进行排列。

常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

（6）align-content(*):默认取值为stretch,用于控制多行项目的对齐方式，如果项目只有一行则不会起作用（flex-wrap:wrap）容器的宽度必须设置为div总数的宽度；即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

       注意：flex-start ，center，flex-end 与align-items属性表现一致。

             space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

             space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

             align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。

     10.项目属性：容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。

  （1）order:默认取值为0，用于决定项目排列顺序，数值越小，项目排列越靠前。

    （2）flex-grow:默认取值为0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；即便设置了固定宽度，也会放大。

     （3）flex-shrink:默认取值为一，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

     （4）flex-basis:默认取值为auto, 用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。

     （5）flex(*):默认取值为0，1，auto。flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大，但等分缩小。

      （6）align-self:默认取值为auto，表示继承父容器的align-items属性。如果没父元素，则默认stretch。用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

11.小案例：

   （1）页面效果图如下：

        

（2）页面布局的HTML代码：

     

      采用flex布局的元素container，书写多个div元素，并通过css来设置div的样式。

（3）div元素在css中设置的样式：

     

       通过在css中的样式设置，用到的知识点由上可知（请看上面），运用了flex布局的容器属性和项目属性。