Flex布局简单总结
flex布局
写在前面
flex布局可以说是目前移动端布局中运用最多的一种布局方式了，专门针对移动端开发，以前的老技术就不提了，现在火热的比如微信小程序，React Native等都对flex布局支持相当友好！
父项常见属性详解
flex：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
- 父项盒子的常见属性
flex-direction：设置主轴的方向，子元素是跟着主轴来排列的
主轴默认X，水平向右
侧轴默认Y，水平向下
:row //默认值，从左到右
:row-reverse //从右到左
:column //从上倒下
:column-reverse //从下到上
justify-content：设置主轴上的子元素排列方式
:flex-start //默认值,如果主轴为X / Y，则从左到右 / 上到下
:flex-end //从尾部开始排列
:center //在主轴居中显示
:space-around //均分剩余空间
:space-between //先两边贴边，再均分剩余空间
flex-wrap：设置子元素是否换行
flex布局中默认是不换行的，谁是主轴，默认就是根据主轴排成一行
:nowrap //不换行，默认
:warp //换行显示
align-content：设置侧轴上的子元素的排列方式（多行）
控制子项在侧轴（默认是y轴）上的排列方式 在子项为多行的时候使用
:flex-start //默认是在侧轴的头部开始排列
:flex-end //在侧轴的尾部开始排列
:center //在侧轴的中间显示
:space-around //子项在侧轴上均分剩余空间
:space-between //子项在侧轴先分布在两侧，在均分剩余空间
:stretch // 设置子项元素高度均分父元素高度
align-items：设置侧轴上的子元素排列方式（单行）
控制子项在侧轴（默认是y轴）上的排列方式 在子项为单行的时候使用
:flex-start //从头部开始
:flex-end //从尾部开始
:center //居中显示
:stretch //拉伸
flex-flow：复合属性，相当于同时设置 flex-direction(主轴方向) 和 flex-wrap(换行)
子项常见属性详解
flex：子项目占的份数
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数
.item { flex: <number>; /* 默认值 0 */ }align-self ：控制子项在侧轴上的排列方式
- 我们已经知道，可以通过父元素来控制子元素在侧抽上的排列（单行/多行）
- align-self 属性允许单个项目有不一样的对齐方式，可覆盖 align-items 属性。
- 默认值为 auto，表示继承父元素的 align-items 属性
- 如果没有父元素，则等同于 stretch。
order ：定义项目的排列顺序
数值越小，排列越靠前，默认为0。
.item { order: 1; }
.
