フレックス共通のレイアウト

一般的なレイアウトの聖杯

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル> </ タイトル> 
        < スタイルタイプ= "テキスト/ cssの" > 
            / * 圣杯布局* / 
            ボディ{ 
                マージン：0 ; 
                パディング：0 ; 
                表示：フレックス。
                フレックス方向：コラム。/ *柔軟なアイテムは、同じの列として、垂直方向に表示される* / 
            } 
            ヘッダ{ 
                フレックス：0は50px ; 
                地色：AliceBlue ; 
                =左の項目を整列：センター; 
            } 
            フッタ{ 
                フレックス：0 200pxの、
                背景色：DimGray ; 
            } 
            .content { 
                ディスプレイ：フレックス; 
                幅：70％ 。
                マージン：0自動; 
                背景：ベージュ; 
                高さ：自動; 
                
            } 
            .square1 { 
                ボーダー：アクア1ピクセル固体。幅：100ピクセル; 高さ：100pxに。/ * 内容效果* / 
            } 
            .square2 { 
                ボーダー：アクア1ピクセル固体。幅：700px ; 高さ：100pxに; / * コンテンツのパフォーマンスの* / 
                
            } 
            .parcel2 { 
                表示：フレックス、
                フレックスラップ：ラップ; 
            } 
        </ スタイル> 
    </ ヘッド> 
    < 身体> 
        <！ -  
            上から頭の下にページ、真ん中の脚;ヘッドはスケーラブルで、高くはない足を踏み入れ、適応性の高いミドル。
         - > 
         < ヘッダ> < のH1 > [ - ]ダム雲ザCOM </ のH1 > </ ヘッダ> 
         
             < DIV クラス= "コンテンツ" > 
                <= "小包" > 
                    < divのクラス= "SQUARE1"  >方块1 </ divの> 
                    < divのクラス= "SQUARE1"  >方块1 </ divの> 
                    < divのクラス= "SQUARE1"  >方块1 </ divの> 
                    < divのクラス= "SQUARE1"  >方块1 </ divの> 
                    < divのクラス= "SQUARE1"  >方块1 </ DIV > 
                    <div クラス= "SQUARE1"  >方块1 </ DIV > 
                </ DIV > 
                < DIV クラス= "parcel2" > 
                    < DIV クラス= "square2"  >方块2 </ DIV > 
                </ DIV > 
             </ DIV > 
         
         < フッタ> </ フッタ> 
    </ ボディ> 
</ HTML >

コードの表示

レンダリング：

 第二に、高速情報ページ