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佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。