Flex布局

前言：

      Flex布局现在已经很流行了，它用起来非常灵活，方便。我本人只是偶尔用到它的一些特性，并没有全面掌握它的所有用法，好记忆不如烂笔头，所以这里特此记录一下它的全面用法。

1什么是Flex布局？

       Flex是Flexible Box的缩写，意为“弹性布局”用来为盒状模型提供最大的灵活性。

     任何一个容器都可以指定为Flex布局  

    .box{display:flex}
    行内元素也可以使用Flex布局    
    span{display:inline-flex}
    Webkit内核的浏览器，必须加上-webkit前缀
    .box{
         display:-webkit-flex;/*safari*/
         display:flex
     }
  注意：设为Flex布局以后，子元素的Float、lear和vertical-align属性将失效。

2 基本概念

   采用Flex布局的元素称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”

3 容器的属性

   ·flex-direction

   .flex-wrap

   .flex-flow

   .justify-content

   .align-items

    .align-content

3.1flex-firection:项目的排列方向 

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

     row:默认值，水平方向，起点在左端

       row-reverse:水平方向，起点在右端

     column:垂直方向，起点在上沿

       column-reverse:垂直方向，起点在下沿

3.2 flex-wrap:默认情况下项目都排在一条线上，flex-wrap属性定义如何换行

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

     nowrap:默认值，不换行

     wrap:换行，第一行在上方

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

3.3 flex-flow:是flex-direction属性和flex-wrap属性的简写。默认值row nowrap

     flex-flow: row wrap;

3.4 justify-content:项目的对齐方式

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

      flex-start:左对齐

      flex-end:右对齐

      center:居中

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

     space-around:每个项目两侧的间隔都相等（margin-left;margin-right的值相等）。所以项目之间的间隔比项目与边 框的距离大一倍

3.5 align-items:属性定义项目在交叉轴上如何对其

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

       .flex-start:交叉轴的起点对齐

       .flex-end:交叉轴的终点对齐

       .center:交叉轴的中点对齐

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

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

3.6 align-content:定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

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

4项目item的属性

  .order：定义项目的排列顺序。数字越小，越靠前。默认值是0

  .flex-grow：定义项目的放大比例。默认值0 表示如果存在剩余空间，也不放大

.flex-shrink：定义了项目的缩小比例，默认值为1 ，即空间不足项目缩小。

  如果所有项目flex-shrink值都为1，当空间不足时，都将等比例缩小。如果一个项目flex-shrink的属性为0，其他项目都为1，则空间不足时，前者不缩小。（负值无效）

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

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

.align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。