新手小白非常适合的手机端常见布局，flex布局属性详解

常见的父项属性

flex-direction：设置主轴的方向

flex-direction:属性决定主轴的方向（即项目的排列方向）默认x轴为主轴
注意：主轴和侧轴是会变化的，我们的子元素是跟着主轴排列的
flex-direction:row(默认值)|row-reverse(从右到左)|column（从上到下）| column-reverse(从下到上)
           

justify-content：设置主轴长的子元素排列方式

justify-content：属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
属性：justify-content：flex-start|flex-end|center|space-around|space-between
flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐，（如果主轴是x轴则水平居中）
space-around：平分剩余空间
space-between:先两边贴边，再平分剩余空间（重要）
           

flex-wrap：设置子元素是否换行

flex-wrap:默认情况下项目都排在一条线上（主轴），如果排不下了会自动缩小，不管你有没有设置宽度或者高度。
flex-wrap：nowrap（默认值，不换行）| wrap （换行）
           

align-content：设置侧轴上的子元素的排列方式（多行，以主轴为参考）

align-content：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的
属性：
flex-start:默认值在侧轴的头部开始排列
flex-end:在侧轴的尾部开始排列
center：在侧轴的中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度
注意：这里的多行是以主轴为参考的！！！
           

align-items：设置侧轴上的子元素排列方式（单行，以主轴为参考）

align-items:该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用
align-items:flex-start(默认值，从上到下)|flex-end（从下到上）| center（挤在一起居中（垂直居中）） | stretch(拉伸，但是子元素不要给高度否则无效)
           

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction:column;
flex-wrap:wrap;
上面两句话可以简写为：
flex-flow:column wrap;
           

常见的子项属性

flex子项占的份数

flex属性定义子项目分配剩余空间，用flex来表示占多数份数
flex：数字; 
例如
flex：1;
           

align-self控制子项在自己侧轴的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素则等同于stretch
           

order属性定义子项的排列顺序（前后顺序）

order 定义项目的前后排序，数值越小，排列约靠前，默认值为0.