flex常見佈局

時間 2019-11-30

標籤 flex 常見佈局欄目 Flex 简体版

原文原文鏈接

一，常見聖盃佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 聖盃佈局 */
            body{
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;/* 靈活的項目將垂直顯示，正如一個列同樣 */
            }
            header{
                flex: 0 0 50px;
                background-color: aliceblue;
                align-items: center;
            }
            footer{
                flex: 0 0 200px;
                background-color: dimgray;
            }
            .content{
                display: flex;
                width: 70%;
                margin: 0 auto;
                background: beige;
                height: auto;
                
            }
            .square1{
                border: aqua 1px solid;width: 100px; height: 100px;/* 內容效果 */
            }
            .square2{
                border: aqua 1px solid;width: 700px; height: 100px;/* 內容效果 */
                
            }
            .parcel2{
                display: flex;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <!-- 
            頁面從上到下爲頭部、中部、腳部；頭部、腳部定高，不可伸縮；中部高度自適應。
         -->
         <header><h1>阿呆雲[-].COM</h1></header>
         
             <div class="content">
                <div class="parcel">
                    <div class="square1" >方塊1</div>
                    <div class="square1" >方塊1</div>
                    <div class="square1" >方塊1</div>
                    <div class="square1" >方塊1</div>
                    <div class="square1" >方塊1</div>
                    <div class="square1" >方塊1</div>
                </div>
                <div class="parcel2">
                    <div class="square2" >方塊2</div>
                </div>
             </div>
         
         <footer></footer>
    </body>
</html>

View Code

效果圖：css

二，快資訊頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                display: flex;
                margin: 0;
                padding: 0;
                flex-wrap: wrap;
            }
            .box{
                display: flex;
                margin: 0 auto;
                width: 80%;
                height: 1000px;
                background: #696969;
            }
            .top{
                width: 100%;
                height: 50px;
                background: #00FFFF;
                text-align: center;
            }
            .left{
                width: 30%;
                background: #F5F5DC;
            }
        </style>
    </head>
    <body>
        <div class="top">導航欄</div>
        <div class="box">
            <div class="left">
                略縮內容
            </div>
            <div class="right">
                展開內容
            </div>
        </div>
        
    </body>
</html>

View Code

效果圖：html

相關標籤/搜索

每日一句

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