您的位置：首页 > Web前端 > CSS

css中flex:1弹性布局例子

2017-08-13 10:09 555 查看

（转载）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后的剩余空间

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航