CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)

时间 2019-11-12

标签 css 布局 flex 实现两边顶宽中间自适应双飞栏目 CSS 繁體版

原文原文链接

CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)

<!DOCTYPE html>
<html>
<head>
    <title>CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,.footer{
            border: 1px solid #333;
            background: purple;
            color: white;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }
        .container {
            display: flex;
            
        }
        .left,.middle,.right{
            background-color: aqua;
            min-height: 130px;
            line-height: 130px;
            border: 1px solid #333;
            text-align: center;
        }
        .left{
            flex-basis: 220px;
            order: 1;
        }
        .middle {
            flex: 1;
            order: 2;
        }
        .right{
            flex-basis: 220px;
            order: 3;
        }
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
        </div>
        <div class="left">
            <h4>left</h4>
        </div>
        <div class="right">
            <h4>right</h4>
        </div>
    </div>
    <div class="footer">
            <h4>footer</h4>
    </div>
</body>
</html>

html

使用浮动实现《CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)》见→http://www.javashuo.com/article/p-fugnyklf-g.htmlcss

思考html

-若是向类为middle的div添加数个<h4>middle</h4>，left，right的div为何会与middle同一高度？ide

//若是一些元素比其余元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

答案

参考flex的基本概念→https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox布局