flex布局方案

by feng chen

HTML

<h4>
  flex布局方案
</h4>
<article class="layout_flex">
  <div class="left">左边部分</div>
  <div class="middle">中间部分</div>
  <div class="right">右边部分</div>
</article>

CSS

html * {margin:0; padding:0;}
.layout_flex{display:flex;}
.layout_flex > div{min-height:100px;}
.left{width:100px; background:lightblue;}
.right{width:100px; background:lightgreen;}
.middle{flex:1; background:pink;}