CSS3 笔记3 — 弹性盒布局flex

最新推荐文章于 2024-05-05 19:46:18 发布

erdouzhang

最新推荐文章于 2024-05-05 19:46:18 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3 文章标签： css3

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/61913993

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用CSS3中的box-flex属性实现弹性盒布局，使网页能够自适应不同大小的浏览器窗口。通过示例代码详细解释了兼容性写法以及各属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹性盒布局

这里写图片描述

使用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>