flex 用法

flex: flex-grow flex-shrink flex-basis

• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

flex : 1 === flex: 1 1 0

1. 元素定宽，不可伸缩 即 flex: none 目测等同于：flex: 1 0 auto（第3点， 可超出，不可压缩）
   flex: 0 0 auto

2. 不可超出，但可压缩 flex 初始值即 flex: initial 。 如果子项都是 flex: initial，父元素BOX宽度400， a宽度60，b宽度100, c没有设置宽度，如果c的内容特别宽，比如500，则会压缩a、b的宽度。
   flex: 0 1 auto

3. 可超出，不可压缩. 如果子项都是 flex:1 0 auto，父元素BOX宽度400， a宽度60，b宽度100, c没有设置宽度，如果c的内容特别宽，比如500，则a，b宽度不变，c宽度会尽可能地宽。
   flex: 1 0 auto

4. 不可超出， 即 flex : auto 。 如果子项都有宽度，会根据子项宽度比分配空间。如果只是某些子项有宽度，会优先展示没有设置宽度的子项，剩余空间再根据子项的宽度比来分配。
   flex: 1 1 auto

5. flex 内容一行上下居中，文字居左

.f-flvc {  
   display:flex;
   align-content:center;
   align-items:center;
}

6. flex 内容多行居中排版，需要定高

.f-fvc{
    display:flex; 
    justify-content:center;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:vertical; 
}