flex常用技巧

IT技术的使用往往因时代而变，也许昨天你还在吐槽flex可悲的兼容性，而今天你却发现小程序和uri-app跨平台开发对flex是那样友好
那么
对容器生命flex

display: flex;

flex默认是块级元素，如果希望声明为行内样式

display: inline-flex;

align-items 可以设置flex下子元素的垂直对齐方式
justify-content 可以设置flex元素下子元素的水平对齐方式
align-self 可以设置flex容器下单个子元素自己的垂直对齐方式
它们的具体属性有 flex-start 开始对齐 flex-end 结束对齐 center 居中对齐
另外他们都可以设置两端对齐

justify-content: space-between;/*子元素水平方向两端对齐*/
align-content: space-between;/*子元素垂直方向两端对齐*/

flex:1 自动站满父容器空余位置
flex-wrap 设置子元素换行 具体属性有 默认nowrap:不换行 wrap:允许子元素在必要时换行 wrap-reverse允许子元素在必要时换行 ，但会反向排序
flex-direction 改变子元素主轴方向 具体属性有
默认row 子元素由左到右排序
row-reverse 子元素从右到左排序
column 子元素从上到下排序
column-reverse 从下往上排序