A common layout Holy Grail

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 圣杯布局 */
            body{
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;/*Flexible items will be displayed vertically, as a column of the same * / 
            } 
            header { 
                Flex : 0 0 50px ; 
                background-Color : AliceBlue ; 
                align = left-items : Center ; 
            } 
            footer { 
                Flex : 0 0 200px ; 
                background-Color : DimGray ; 
            } 
            .content { 
                the display : Flex ; 
                width : 70% ;
                margin: 0 auto;
                background: beige;
                height: auto;
                
            } 
            .Square1 { 
                border : Aqua Solid 1px ; width : 100px ; height : 100px ; / * Content Performance * / 
            } 
            .square2 { 
                border : Aqua Solid 1px ; width : 700px ; height : 100px ; / * Content Performance * /
                
            }
            .parcel2{
                display: flex;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <!-- 
            The page from top to bottom of the head, the middle leg portion; head, foot set high, not scalable; highly adaptive middle.
         -> 
         < header > < h1 of > Dumb cloud [-]. The COM </ h1 of > </ 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
Renderings:
Second, the fast information page

flex common layout

A common layout Holy Grail

Second, the fast information page

Guess you like
