整理笔记..方便迅速复习和问题处理纪要
-------------------------------------------------------------------------------
觉得写的狠好，怒而转之
https://www.cnblogs.com/qcloud1001/p/9848619.html
翻墙：
https://wcc723.github.io/css/2017/07/21/css-flex/
快速复习笔记扼要：
flexbox布局分主轴(Main Axis)与于交叉轴(Cross Axis)，且交叉轴是与主轴垂直90度的轴，所以flexbox布局可以理解成一个变换过的直角坐标系系统.主轴可以看做X轴和交叉轴看做Y轴
属性一览：
容器属性 --------整个容器Element项的全局设置
- flex-direction 设置主轴的方向，可理解为直角坐标系的变换
- flex-wrap: 项折行设置 如 flex-wrap:nowrap; 为不折行.
- justify-content 主轴的对齐方式 如，justify-content:center;
- align-items: 交叉轴的对齐和拉伸方式,但是只对首轴行（以轴方向的一个单位行）的element项有效.
- align-content 同align-items,全部轴行有效.
- flex-flow flex-direction和flex-wrap的组合,如flex-flow:row nowrap等同于 flex-direction: row; flex-wrap:nowrap;
元素属性 --------单个指定Element项的设置
-
- order 排列次序
- flex-grow 设置单项容器项的放大比例（例如主轴剩余容器空间50px, 项一 grow 2, 项二 grow 3 则 ｛元素宽度｝+ 50px/(2+3) *3 = 新的大小）
- flex-shrink 设置单项容器项的缩放比例（例如主轴超出容器空间50px, 项一 shrink 2, 项二 shrink 3 则 ｛元素宽度｝- 50px/(2+3) *3 = 新的大小）
- flex-basis 设置主轴的初始尺寸
- align-self 设置单项的交叉轴对齐和拉伸方式
- flex flex-grow,flex-shrink,flex-basis的组合
-----------------------------------------割------------------------------------------------------------------
flex问题
Q.flex布局下 使用滚动容器失效解决:
codepen:https://codepen.io/linqingwudiv1/pen/QWwEYQb
有些时候可能需要对滚动容器设置
min-height:100%;
height:0;
属性组合使之生效。