在实现之前先认识几个伸缩布局的属性:
display:-webkit-box; 容器成为伸缩模型
box-flex:通过比例让元素以块状填充
box-ordinal-group: 元素显示顺序
box-orient:伸缩流方向
box-direction:布局顺序
box-lines:伸缩换行(暂不支持)
box-pack:主轴对齐
box-align:侧轴对齐
-webkit-line-clamp:限制在一个块元素显示的文本的行数
实现代码css样式
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page, .min {
width: 100%;
}
.h {
height: 90px;
}
.page {
display: -webkit-box;
}
.box-left, .box-right {
width: 220px;