css弹性盒子

CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒模型的语法基础概念
任何一个容器都可以指定弹性布
设置 flex 布局以后，子元素的 float,clear,vertical-align 等样式全部失效
display:flex;或 display:inline-flex;

弹性父元素属性
display:flex;
flex-direction: row|row-reverse|column| column-reverse指定了弹性子元素在父容器中的位置。
juestify-content:flex-start|flex-end|center|space-between| space-around 水平对齐方式
align-items:flex-start | flex-end | center | baseline | stretch 垂直对齐方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
align-content:当flex-wrap起作用发生换行时，该属性控制每行的对齐方式
弹性子元素属性
order:num 数值小的排在前面。可以为负值
flex 属性用于指定弹性子元素如何分配空间