css中flex:1弹性布局例子

来源：互联网发布：linux rm最酷的命令编辑：程序博客网时间：2024/05/22 00:11

（转载）http://blog.csdn.net/disadministrator/article/details/54614188

[html] view plain copy
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
#main {  
    width: 220px;  
    height: 300px;  
    border: 1px solid black;  
    display: -webkit-flex; /* Safari */  
    -webkit-align-items: center; /* Safari 7.0+ */  
    display: flex;  
    align-items: center;  
}  
  
#main div {  
   -webkit-flex: 1; /* Safari 6.1+ */  
   flex: 1;  
}  
</style>  
</head>  
<body>  
  
<div id="main">  
   
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>    
  
     RED  
  
 </div>  
</body>  
</html>   

注意事项：

1.flex必须在弹性模块中有效，即display：flex

2.如上例RED没有参与flex分配，所以蓝色和绿色平均分配除RED后的剩余空间

阅读全文

0 0