Flex布局

一、什么是flex布局：

• 任何容器都可以指定为 flex 布局，行内元素也可以使用flex布局

      .box{
        display:flex;
      }
      .box{
        display:inline-flex;
      }

• webkit内核的浏览器必须加上 -webkit- 前缀

    .box{   
        display:-webkit-flex;
        display:flex;
    }

• 设为flex布局以后，子元素的 float、clear、vertival-align 属性将失效

二、基本概念：

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性：

flex容器有6个属性：

• flex-direction: 决定主轴的方向 - row|row-reverse|column|column-reverse
• flex-wrap: 决定换行方式 - nowrap|wrap|wrap-reverse
• flex-flow: 是flex-direction和flex-wrap的简写形式 - ||
• justify-content: 定义项目在主轴上的对齐方式 - flex-start|flex-end|center|space-between|space-around
• align-items:定义项目在交叉轴上的对齐方式 - flex-start|flex-end|center|baseline|stretch
• align-content:定义多根轴线的对齐方式 - flex-start|flex-end|center|space-between|space-around|stretch

flex-direction

flex-wrap

justify-content

align-items

align-content

四、项目的属性：

项目有6个属性：

• order: 定义项目的排序，数值越小排序越靠前 - integer
• flex-grow: 定义项目的放大比例。默认为0，即如果有剩余空间也不放大 - number
• flex-shrink: 定义项目的缩小比例。默认为1。如果空间不足，该项目将缩小。如果设置为0，则空间不足也不缩小 - number （负值无效）
• flex-basis: 定义在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据这个属性计算主轴是否有多余空间。默认值为auto，即项目本来的大小
• flex: 是flex-grow,flex-shrink,flex-basis的简写，默认值为 0 1 auto，后两个值可选
• align-self: 允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items，没有父元素则等同于stretch - auto|flex-start|flex-end|center|baseline

• order
  

• flex-grow
  

• flex-shrink
  

• align-self
  

参考链接：阮一峰的 Flex 布局教程：语法篇