flex.css

/* 
深入理解CSS弹性盒模型flex:
http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-1 
*/


/* 
伸缩容器
　　以下6个属性作用在伸缩容器上


1、伸缩流方向 flex-direction
2、伸缩流换行 flex-wrap
3、伸缩流(包括方向与换行) flex-flow
4、主轴对齐 justify-content
5、侧轴对齐 align-items
6、堆栈伸缩行 align-content

[注意]主轴方向不一定是水平的，它主要取决于justify-content属性

     伸缩流方向: 水平方向  | 反向水平     | 垂直方向  | 反向垂直
flex-direction: row[默认] | row-reverse | column   | column-reverse

伸缩行换行:不换行        | 换行 | 反转换行
flex-wrap: nowrap[默认] | wrap | wrap-reverse

水平方向 主轴对齐方式: 左对齐           | 居中对齐 | 右对齐    | 两端对齐       | 扩散对齐
    justify-content: flex-start[默认] | center   | flex-end | space-between | space-around

垂直方向 侧轴对齐方式: 顶边对齐   | 中间对齐 | 底部对齐  | 基线对齐  | 伸缩项目拉伸填充整个伸缩容器 | 两端对齐 | 扩散对齐 |
        align-items: flex-start | center  | flex-end | baseline | stretch[默认]              | space-between | space-around

[注意]如果伸缩项目有width/height属性将优先于侧轴对齐为拉伸的方式

 */


/* 
 伸缩项目
　　一个伸缩项目就是伸缩容器的一个子元素。伸缩容器中的文本也被视为一个伸缩项目。以下6个属性设置在伸缩项目上。

1、自身侧轴对齐方式 align-self

    侧轴对齐方式: 自动      | 顶边对齐    | 中间对齐 | 底部对齐 | 基线对齐  | 伸缩项目拉伸填充整个伸缩容器
    align-self: auto[默认] | flex-start | center  | flex-end | baseline | stretch

2、伸缩基准值 flex-basis
    
    如果flex-basis的值为0，表示伸缩项目在主轴方向上的初始大小为0，分配所有空间；如果flex-basis的值为auto，
    表示伸缩项目在主轴方向上的初始大小为设置宽度(如果没有设置宽度，则为内容宽度)，再分配剩余空间

    [注意]flex-basis的<length>值可以是一个数字后面跟着px、em等单位，也可以是一个百分数，相对于其父伸缩容器的主轴长度

3、扩展比率 flex-grow

    若flex-grow的值为0表示即使存在剩余空间也不放大；若所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)；
    若一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

4、收缩比率 flex-shrink

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

　[注意]伸缩基准值、扩展比率和收缩比率都可以为小数，但不能为负数

5、伸缩性 flex : 是扩展比率、收缩比率和伸缩基准值的缩写

    flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
    
    flex: none => flex: 0 0 auto;//表示宽度为原始宽度，不发生扩展或收缩
    flex: auto => flex: 1 1 auto;//表示除了占据原先的宽度外，还要分配剩余宽度(包括扩展或收缩)
    flex: 0 => flex: 0 1 0%;//表示收缩为最小宽度
    flex: 1 => flex: 1 1 0%;//表示分配所有宽度(包括扩展或收缩)
    flex: 0 auto => flex: 0 1 auto;(默认值)//表除了占据原先的宽度外，还要分配剩余宽度(只收缩，不扩展)
    flex: 0 1 => flex: 0 1 0%;

    [注意]当flex为关键字none或存在auto时，flex-basis为auto；若flex只有数字值，则flex-basis为0%；

6、显示顺序 order
    
    定义伸缩项目的排列顺序，数值越小，排列越靠前
    order: <number>[默认为0];
    order的属性值可以是负数，但不能是小数

 
 */




 /* 如果子元素设置固定width后会被压缩宽度，可以改为设置min-width */


.flex_box {
    display: flex;
    /* 默认是横分 */
    flex-direction: row;
    /* flex-direction: column;  设置竖分*/
    justify-content: center;
    -webkit-justify-content: center;
    /* align-content:center; 属性对齐交叉轴上的各项（垂直）。 */
}

.flex_box .left {
    flex-grow: 2;
    flex-basis: 0;
}

.flex_box .right {
    flex-grow: 3;
    flex-basis: 0;
    /* 按照 2:3 的比例分；需要再分加 display: flex; */
}

.dis-flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .dis-flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .dis-flex-start{
    display: flex;
    justify-content: center;
  }
  
  .dis-flex-column{
    display: flex;
    flex-direction:column;
    justify-content: center;
  }