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

CSS3 笔记3 — 弹性盒布局flex

2017-03-13 10:26 681 查看

弹性盒布局

使用CSS3中的一个box-flex属性就可以随着浏览器窗口的改变而自适应。

弹性盒布局是在盒布局的基础上进行自适应。

弹性盒布局兼容性：

-webkit-box-flex:1; （Safara浏览器、Chrome浏览器）
-moz-box-flex:1;（Firefox浏览器）

数字1 是指所占的比例份数。（比如第一个div1盒子是数字1，第二个div2盒子是数字3.那么总共是4份，div1占一份，div2占3份。）

html ：

<body>
<div class="box">
<div class="left">
<ul>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
</ul>
</div>
<div class="cen">中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应</div>
<div class="right">
<ul>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
<li><a href="#"></a>列表列表</li>
</ul>
</div>
</div>
</body>

CSS：

<style>
body {margin: 0;padding: 0;}
.box {
display: -webkit-box; /*给大盒子添加盒布局兼容性*/
display: -moz-box; /*给大盒子添加盒布局兼容性*/
-webkit-box-orient:horizontal;/*水平方向排列*/
-moz-box-orient:horizontal;
}
div.left {
width: 300px;
padding: 10px;
background-color: #eee;
-webkit-box-ordinal-group:1;/*显示顺序*/
-moz-box-ordinal-group:1;
}
div.cen {
width: 400px;
padding: 10px;
background-color: pink;
-webkit-box-flex:1;  /*让谁随着浏览器改变就给谁添加，数字是进行等比分，然后占的份数*/
-moz-box-flex:1;     /*让谁随着浏览器改变就给谁添加，数字是进行等比分，然后占的份数*/
-webkit-box-ordinal-group:2; /*显示顺序*/
-moz-box-ordinal-group:2;
}
div.right {
width: 300px;
padding: 10px;
background-color: #eee;
-webkit-box-ordinal-group:3;    /*显示顺序*/
-moz-box-ordinal-group:3;
}
</style>

解析：

-webkit-box-ordinal-group:1;

-moz-box-ordinal-group:1;

是显示顺序。

-webkit-box-orient:horizontal;

-moz-box-orient:horizontal;

是改变元素排列方向：horizontal是在水平行中从左到右排列子元素，vertical是从上到下垂直方向排列子元素。

-webkit-box-ordinal-group:3; /显示顺序/

-moz-box-ordinal-group:3;

是盒子显示顺序。

使用盒布局，就解决了盒子的浮动及底边对齐问题。

使用弹性盒布局可以对浏览器窗口自适应。

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

标签： css3

相关文章推荐

新的分享

章节导航