弹性盒子布局

时间 2019-11-12

标签弹性盒子布局栏目 CSS 繁體版

原文原文链接

弹性盒子布局能够实现宽度和高度自适应的布局css

水平布局html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹性盒子布局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        /*-moz-box-flex: 1;*/
        /*-webkit-box-flex: 1;*/
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左侧栏</div>
    <div class="content">我是主内容部分</div>
    <div class="right_side">我是右侧栏</div>
</div>
</body>
</html>

右边有一个空白区域，只要给中间内容部分加上 box-flex：1；jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹性盒子布局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左侧栏</div>
    <div class="content">我是主内容部分</div>
    <div class="right_side">我是右侧栏</div>
</div>
</body>
</html>

能够经过改变属性 box-orient:vertical 将水平布局改成垂直布局，宽度自动铺满整个区域web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹性盒子布局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左侧栏</div>
    <div class="content">我是主内容部分</div>
    <div class="right_side">我是右侧栏</div>
</div>
</body>
</html>