CSS3--Flex布局

Flex：Flexible Box,直译为灵活的盒子模型，意译为弹性布局，弹性者，可变性强、能屈能伸之谓也。

---

使用方法:

    //块级元素
    display:flex; 
    //行内元素
    display:inline-flex;
    //在以Webkit为内核的浏览器中，应该加上前缀-webkit。如Safari、Chrome，360极速等
    .box{
            display:flex;
            display:-webkit-flex;
    }

---

基本概念：

---

属性：

1、Flex container

flex container拥有6个属性，设置时都在容器上设置。

 flex-direction //描述主轴的方向
 flex-wrap  //描述项目在轴线排列不下的情况下如何换行
 flex-flow  //描述项目的缩放方式
 justify-content //描述项目在主轴上的排列方式
 align-items  //描述项目在交叉轴上如何对齐
 align-content  //描述了在有多根轴线的对齐方式。只有一根轴线的情况下，该属性无作用

• flex-direction //描述主轴的方向

  默认值：row

flex-direction: row | row-reverse | column | column-reverse;
//row 主轴水平向右
//row-reverse 主轴水平向左
//column 主轴垂直向下
//column 主轴垂直向上

• flex-wrap //描述项目在轴线排列不下的情况下如何换行
  注：在未设置也就是默认情况不换行的情况下，容器下的所有元素都会显示在同一行，包括行块级元素。
  默认值：nowrap

flex-wrap: nowrap | wrap | wrap-reverse;
//nowrap 不换行
//wrap 换行，第一行在第二行上方
//wrap 换行，第一行在第二行下方

• flex-flow //此属性是flex-direction和flex-wrap的缩写形式
  默认值：row nowrap

flex-flow:<flex-direction>||<flex-wrap>;//如flex-flow:row nowrap;

• justify-content //描述项目在主轴上的排列方式
  默认值：flex-start

justify-content:flex-start | flex-end | center | space-between| space-around;
//flex-start:按照主轴开始方向对齐。例如flex-direction:row;那么就是左对齐。
//flex-end:按照主轴结束方向对齐。
//center：居中对齐
//space-between：两端对齐（也就是紧贴start，end），项目之间的间距相等。
//space-around：项目两侧的间隔相等，相当于设置每个项目的两侧margin为同样的值。

• align-items //描述项目在交叉轴上如何对齐
  注:因为此属性是在容器中设置的，因此其项目都按照此规则排列
  默认值：stretch

align-items:flex-start | flex-end | center | baseline | stretch;
//flex-start:交叉轴的开始点
//flex-end:交叉轴的结束点
//center:交叉轴的中点
//baselin：项目中的文字的第一行的基线对齐
//stretch：如果项目未设置高度或设为auto，项目将在交叉轴方向拉伸，充满整个交叉轴

• align-content //描述了在有多根轴线的对齐方式。只有一根轴线的情况下，该属性无作用

align-content:flex-start | flex-end | center | stretch | space-between | space-around;
//flex-start 多个轴线为一个整体，以交叉轴起点对齐
//flex-end   多个轴线为一个整体，以交叉轴终点对齐
//center  多个轴线为一个整体，以交叉轴中点对齐
//stretch 多个轴线上的项目原有的间距保持不变，但在交叉轴上拉伸，填充满除去本身间距之外的空隙
//space-between 多个轴线上的项目以轴线为单位向交叉轴两侧对齐，轴线之间的间隔平均分布
//space-around  以轴线为单位，每根轴线的两侧间距都相等，平均分布于整个交叉轴

2、Flex item

flex item拥有5个属性，设置时都在项目上设置。

    order  //描述项目的排列顺序，数字越小，排列越靠前，可以为负值。
    flex-grow  //描述项目的放大比例。
    flex-shrink  //描述项目的缩小比例
    flex-basis  // 描述项目的main size大小
    flex  // flex-grow,flex-shrink,flex-basis的缩写
    align-self  // 为单个项目设置对齐属性。

• order 描述项目的排列顺序，数字越小，排列越靠前，可以为负值。
  默认值：0；

    order：<integer>;//整数

• flow-grow 描述项目的放大比例.
  注：是按照比例分配剩余的空间，而不是按本身大小缩放的比例。
  默认值：0；当为设置为0时，不管是否存在剩余空间都不缩放，当设置为其他数值时，项目在主轴上放大时所占的空间=单位放大空间*flow-grow的值。
  

    flow-grow:<integer>;

• flex-shrink 描述项目的缩小比例,不接受负值。
  默认值：1；如果空间不足，将缩小该项目。当设置为0时，该项目保持不变。

    flex-shrink:<number>;

• flex-basis 描述了项目在剩余空间分配之前，项目所占的主轴空间（main size),然后浏览器按照轴线上的所有项目的这个值来计算剩余空间。
  默认值：auto；

    flex-basis:200px | auto;

• flex flex-grow,flex-shrink,flex-basis的缩写
  默认值：0 1 auto；大小自动，可缩小不能放大。

    flex:none;//相当于 flex:0 0 auto;
    flex:auto;//相当于 flex:1 1 auto;
    flex: <flex-grow> || <flex-shrink> || <flex-basis>;

• align-self
  默认值：auto；
  该设置会覆盖容器的align-items属性，当设置为auto时，则继承容器的align-items属性，如果没有容器，那等同于stretch。

    align-self:flex-start | flex-end | center | baseline | stretch|auto;//也就是align-items的对齐方式。

---