## ## 外层container属性： * display后，子元素vertical-align,float,clear失效 ~~~ display:flex; display:-webkit-flex; ~~~ * 容器属性： 1. 主轴item排列方向：默认左右，右左，上下，下上 `flex-direction:row | row-reverse | column | column-reverse` 1. 换行：默认不换行，换行，换行同时第一排在下面 ` flex-wrap:nowrap | wrap | wrap-reverse` **以上2个的简写合并为flex-flow** ~~~ flex-flow:row nowrap ~~~ * 主轴上item对齐方式 默认左对齐，右对齐，居中，两端对齐，每个项目2边间距相等（margin: x 0） `justify-content:flex-star | flex-end | center | space-between | space-around` * 交叉轴上的对齐方式（项目元素的高度） 起点对齐，终点对齐，中点对齐，项目第一行文字的基线对齐，默认高度占满容器（如果未设置高度） `align-items:flex-start | flex-end | baseline | strech` * 多根轴线的对齐方式 align-content ## item属性： * 给子元素设置顺序，越小越靠前，默认都为0 `order:整数` * 放大倍数，如果都为1则平分空间，如果有一个为2，则是其他的2倍，默认都为0（即使有剩余空间，也不分配） `flex-grow:整数` * 缩小倍数，默认都为1，即平分空间，自动缩小；为0的不缩小，其他的缩小 `flex-shrink：整数` * 项目尺寸（主轴尺寸），等同于width,height，默认auto,项目本来尺寸 `flex-basis：300px` **以上flex-grow,flex-shrink,flex-basis 3个简写为flex** ~~~ flex:0 1 auto; //默认值 flex:auto //等同于：1 1 auto flex:none //等同于:0 0 auto ~~~ * 单独样式 align-self