flex實現html左右佈局

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
.parent{
  height:500px;  
  border:1px solid #222;  
  display:flex;/*設爲伸縮容器*/  
  flex-flow:row;/*伸縮項目單行排列*/  
}  
.stable{  
  width:200px;/*固定寬度*/  
  border:1px solid  #ccc;  
  margin:20px;  
}  
.change{  
  flex:1;/*這裏設置爲佔比1,填充滿剩餘空間*/  
  border:1px solid #ff4400;  
  margin:20px;  
}  
</style>  
</head>  
<body>  
  <div class="parent">  
    <div class="stable">stable 固定寬度200px</div>  
    <div class="change">changeable 可變寬度</div>  
  </div>  
</body>  
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章