在常规的项目开发中，很多时候不使用响应式框架的前提下，都需要开发人员手动实现自适应，这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套，以及CSS样式的使用，就能实现简单的自适应布局。

常见的实现方式有2种:

• 使用简单的盒子模型的特性, 子盒子使用{ width:百分比; }实现比例缩放。
• 使用CSS的属性{ display:flex; },注意要定义在父盒子上，子盒子使用{ flex:数字; }实现比例。

举个例子: 现在需要实现如图1-1所示的自适应布局

• 父盒子中有两个子盒子
• 两个盒子的宽度比是2:1
• 支持响应式缩放
  

1.使用盒子模型实现

首先实现页面的结构，父盒子中嵌套两个子盒子。然后所有div设置高度以便观察效果，根据要求的比例，计算两个盒子的百分比，子盒子设置不同的背景颜色。最后使用float属性，让两个子盒子处于一行。盒子模型的缺点是需要进行计算盒子的百分比，而且数值不会很精确（如果是大量的计算工作，开发效率会很低下）。

页面结构

<div class="big">
	<div class="one"></div>
	<div class="two"></div>
</div>

页面样式

div{ 
	height:100px;
}
.big{ 
	border:1px solid yellow;
}
.one{ 
	width:66.666%;
	background-color: red;
	float:left;
}
.two{ 
	width:33.333%;
	background-color: blue;
	float:left;
}

2.使用弹性盒子实现

不需要修改上面的页面结构，现在只需要将父盒子定义为{ display:flex; }弹性盒子，在子盒子中使用{ flex:数字; }定义各自的宽度比例即可，弹性盒子的优点是不需要进行计算盒子的百分比。

页面样式

div{ 
	height:100px;
}
.big{ 
	display:flex;
	border:1px solid yellow;
}
.one{ 
	flex:2;
	background-color: red;
	float:left;
}
.two{ 
	flex:1;
	background-color: blue;
	float:left;
}

弹性盒子的实现方式明显优于盒子模型，不需要计算百分比，结果也更加精准。