css中flex:1弹性布局例子

来源:互联网 发布:nba数据统计排名 编辑:程序博客网 时间:2024/05/22 09:28
<!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