给其父元素添加属性，display：flex；
justify-content：
space-between；其中的
space-between作用是两端对齐（自己最常用弹性布局的属性），
子元素属性设置为flex：
flex-grow flex-shrink flex-basis
这是简写，也可以单独分离开设置。其中的flex-grow为扩张率、flex-shrink为子元素收缩率、flex-basris是子元素 的收缩基准率，
在平常的开发中自己用到的不多
flex-flow 复合属性，是flex-direction和flex-wrap的简写
不熟练的时候，分开设置，便于记忆，
flex-direction 定义子元素的排列方向，有4个属性值：row，子元素左对齐，也就是沿着x轴左到右排列
row-reverse 与row相反
column，子元素，从上往下（顶对齐）
column-reverse ，与column相反
flex-wrap 控制flex容器 单行显示还是多行显示。有3个属性值，
nowrap | wrap | wrap-reverse
nowrap flex容器为单行，在这种情况下，有可能会溢出，
wrap flex容器为多行，溢出的部分会放置在第二行，
wrap-reverse wrap 反转排列。
align-content：flex-start | flex-end | center | space-between | space-around | stretch，用于多行的弹性盒模型容器，
align-items：flex-start | flex-end | center | baseline | stretch
用于flex容器
align-self：auto | flex-start | flex-end | center | baseline | stretch
用于flex子元素。
justify-content：flex-start | flex-end | center | space-between | space-around
用于flex容器。
感觉弹性布局在一般网站的作用不是很大，在微信小程序用得较多些~_~
来源：oschina
链接：https://my.oschina.net/u/4386697/blog/3881814