弹性布局

给其父元素添加属性，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容器。

感觉弹性布局在一般网站的作用不是很大，在微信小程序用得较多些~_~