zoukankan html css js c++ java

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:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)》见→https://www.cnblogs.com/runrunrun/p/11506650.html

思考

-如果向类为middle的div添加数个<h4>middle</h4>，left，right的div为什么会与middle同一高度？

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

答案

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

查看全文

相关阅读:
[poj_3469]多核CPU
割点与桥，强连通分量，点双，边双[poj_1236]学校网络
 Iview 启动报错 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
修改JAVA_HOME失效
 命令模式
 gradle implementation runtimeOnly 和api 区别
 spring boot 整合 RabbitMQ 错误
 关于技术的想法
 eclipse 背景绿豆沙颜色
 抽象工厂模式

原文地址：https://www.cnblogs.com/runrunrun/p/11565652.html