Flex布局常用属性简单总结：

常用布局方式也就是float，但flex布局更适合移动端项目开发：
参考Flex布局

1，布局方式

  display: flex;
  
  display: -webkit-flex; /* Safari */
  
a.横向纵向布局：
  
  flex-direction: row | column  | row-reverse | row-reverse;

b. 比例布局：默认0
 
 flex-grow： 0 |  1  |   2  |

flex-shrink:设置为0，则即便空间不够，自身也不缩小.

c.允许换行flex-wrap：
  
flex-wrap：nowrap(默认) | wrap | wrap-reverse

wrap-reverse第一排会紧贴容器底部

2,居中

justify-content：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

align-items：flex-start | flex-end | center | baseline | stretch(默认)

多行对齐方式：

align-content：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

继承父容器的align-items属性:

align-self:auto(默认) | flex-start | flex-end | center | baseline | stretch


space-between：左右两侧项目都紧贴容器

space-around ：项目之间间距为左右两侧项目到容器间距的2倍

项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin

baseline：项目以第一行文字的基线为参照进行排列。

3，排列顺序

order决定项目排列顺序，数值越小，项目排列越靠前

order：0

剩余空间的情况下是否放大

更多布局Grid