flex首先要清楚两个点，第一个是父盒子的属性，常用的属性有主轴的方向(flex-direction)，默认是row,其他的还有reverse-row,column,reverse-colum; justify-content属性，表示主轴的对齐方式，常用的属性值有space-between,space-around,center; 是否换行flex-wrap，默认是no-wrap；交叉轴，单行的使用align-items,常见的属性有flex-start,center,flex-end。多行使用align-content。第二点是了解子元素的特点，主要了解三个属性flex-grow,flex-shrink.flex-basis,默认三者可以写成一条属性flex: 1 1 auto;分别代表的含义是什么？flex弹性盒子，弹性表现在可伸缩，flex-grow表示伸，flex-shrink表示缩，缩放多少根据比例加权来计算，flex-basis可以认为是最小宽度，当flex-basis < realWidth < width，flex-basis表示下限，width表示上限，当flex-basis >= width，设置的width会失效。
Document * { padding: 0; margin: 0; } .wrapper { display: flex; width: 300px; height: 300px; border: 1px solid; flex-direction: column; } .header, .footer, .left, .right { flex: 0 0 20%; /* 表示不进行伸缩，但是高度占20% */ border: 1px solid green; box-sizing: border-box; } .contain { flex: 1 1 auto; display: flex; flex-direction: row; } .center { flex: 1 1 auto; border: 1px solid green; } </style>left
right
图如下：
这个实现跟之前用浮动相比，有什么优点呢？ 个人认为：首先，使用弹性盒子布局，更简便了，对布局造成的影响比较小；使用浮动会影响其他元素，像高度塌陷。
第一次写，可能有些考虑的不够周到，如果有补充或者哪里说错了，希望大家指出来！
