css3弹性盒布局

最新推荐文章于 2024-08-21 12:08:59 发布

xuanwuziyou

最新推荐文章于 2024-08-21 12:08:59 发布

阅读量1.3k

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/48107681

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

1. box-flex属性可让宽度自适应

一个例子，三列布局，中间一列的宽度是自适应的，左列的宽度总是300px,右列的宽度总是200px

三个列的父元素使用属性display:box，中间列使用属性box-flex:1

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>弹性盒布局</title>
    <style>
        body{
            margin:0;
            padding:0;
            color:#fff;
        }
        #centerbody{
             margin:0 auto;

             /*分列元素的父元素设为盒布局*/
             display:-moz-box;
             display:-webkit-box;
             display: box;
         }
        div#left{
            width:300px;
            padding: 10px;
            background-color: green;
        }
        div#center{
            background-color: blue;
            -moz-box-flex:1;
            -webkit-box-flex:1;
            box-flex:1;
        }
        div#right{
            width:200px;
            padding:10px;
            background-color: pink;
        }

        div#left,div#center,div#right{
            -webkit-box-sizing:border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="centerbody">
    <div id="left">
        <h2>栏目列表</h2>
        <ul>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
        </ul>

    </div>
    <div id="center">
        始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。我国社会主义制度建立后，社会的主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。这就要求进一步解放和发展生产力，不断满足人民群众日益增长的物质文化需要。党的十八大以来，我们党坚持人民利益至上，深入把握社会主义初级阶段基本国情、社会主要矛盾、世界上最大发展中国家的国际地位“三个没有变”，坚持以经济建设为中心不动摇，坚持改革开放不动摇，进一步解放和发展生产力，不断满足人民群众物质文化需要，以更好更全面地实现人民幸福。

    </div>
    <div id="right">
        <h2>推荐文章</h2>
        <ul>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
        </ul>
    </div>
</div>

</body>
</html>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">效果：</span><img src="https://img-blog.csdn.net/20150830192504798?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" /><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">改变浏览器窗口宽度，发现中间列的宽度是随着变化的，但左右两列的宽度保持不变，当浏览器窗口宽度小于等于500px（左列和右列宽度之和）时，中间列不显示了，如下：</span>

但是中间列里的文字溢出了

那么，给中间列加上属性 overflow:hidden ，溢出文字就不再显示了：

2. box-ordinal-group属性指定元素显示顺序

如上面的例子顺序：

然后为这三个div增加box-ordinal-group属性，如下，使得绿色和蓝色的div交换位置

div#left{
            width:300px;
            padding: 10px;
            background-color: green;

            -moz-box-ordinal-group:2;
            -webkit-box-ordinal-group:2;
            box-ordinal-group:2;
        }
        div#center{
            background-color: blue;
            -moz-box-flex:2;
            -webkit-box-flex:2;
            box-flex:2;

            -moz-box-ordinal-group:1;
            -webkit-box-ordinal-group:1;
            box-ordinal-group:1;
        }
        div#right{
            width:200px;
            padding:10px;
            background-color: pink;

            -moz-box-ordinal-group:3;
            -webkit-box-ordinal-group:3;
            box-ordinal-group:3;
        }

得到效果如下：

3. box-orient属性指定子元素排列方向

在上面蓝色，绿色，粉色页面中，给三者的父元素增加box-orient属性，如下：

#centerbody{
             margin:0 auto;

             /*分列元素的父元素设为盒布局*/
             display:-moz-box;
             display:-webkit-box;
             display: box;

             /*指定子元素排列方向*/
             -webkit-box-orient:vertical;  /* horizontal表示横向，是默认的；vertical表示纵向 */
             -moz-box-orient:vertical;
             box-orient:vertical;
         }

效果：

4. box-pack和box-align属性指定元素的子元素显示在哪儿

值有：start开始 center中间 end结束

例子:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>box-pack属性</title>
    <style>
      div#parent{
          height:300px;
          width: 400px;
          border: 1px solid green;

          /*指定父元素为盒布局*/
          display:box;
          display: -moz-box;
          display: -webkit-box;

          /*指定父元素内的子元素在水平方向显示在哪儿 start开始 center中间 end结束*/
          box-pack:end;
          -moz-box-pack:end;
          -webkit-box-pack:end;

          /*指定父元素内的子元素在垂直方向显示在哪儿 start开始 center中间 end结束*/
          box-align:center;
          -moz-box-align:center;
          -webkit-box-align:center;
      }
        div.child{
            border: 2px solid red;
        }
    </style>
</head>
<body>
 <div id="parent">
     <div class="child">我是子div1</div>
     <div class="child">我是子div2</div>
     <div class="child">我是子div3</div>
 </div>
</body>
</html>

效果：

如果，不把父元素指定为盒布局display:box,那么是这样：