你的位置： 前端博客 > CSS3 > CSS3弹性盒flexbox > 新的flex弹性盒模型语法

Code

.grid{display:-webkit-flex;display:flex}
.col{background:#ccc;padding:30px}
.fluid{flex:1}
.fixed{background:red;width:400px}
<div class="grid">
	  <div class="col fluid">……
	  </div>
	  <div class="col fixed">……
	  </div>
	  <div class="col fluid">……
	  </div>
</div>

Fluid

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Fixed

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Fluid

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

返回CSS3弹性盒模型的完整教程