flex布局-css

1.html

<div id="parent">

 　　<div id="child1"></div>

　　 <div id="child2"></div>

　　 <div id="child3"></div>

</div>

2.css-----父级postion不能是absolute!!

1)child1 固定宽度，child2因child3的宽度变化而变化

#parent{display:flex;width:100%;}

#child1{width:35px;}

#child2{flex:1;-webkit-flex:1;}

#child3{不设宽度}

2)child1、child2及child3宽度按照比例显示 1:2:1

#parent{display:flex;width:100%;}

#child1{flex:1;-webkit-flex:1;}

#child2{flex:2;-webkit-flex:2;}

#child3{flex:1;-webkit-flex:1;}