フレックス三点画面レイアウト

示すような結果：麻雀は、3ふるいを達成します

　　

具体的な実装コード：

　　htmlコード：

  < DIV クラス= "ボックス" > 
        < DIV クラス= "項目" > </ DIV > 
        < DIV クラス= "項目" > </ DIV > 
        < DIV クラス= "項目" > </ DIV > 
    < DIV >

 

　　　　CSSコード：

   ■は { 
        幅：200pxの。
        高さ：200pxの。
        パディング：20ピクセル ; 
        表示：フレックス。
        フレックス方向：行。
        -コンテンツが正当化：スペースの間 ; / * 设置两端对齐* / 
        ボーダー：2ピクセル固体#CCC。
        国境半径：10pxの ; 
    } 
    .item { 
        幅：40ピクセル。
        高さ：40ピクセル ; 
        ボーダーRADIUS：50％ ; 
        背景色：＃666 ; 
    } 
    .Item：テラス、N番目（2） { 
        ALIGN =左自己：センター ; / * 垂直中心* / 
    } 
    .Item：テラス、N番目（ 3） { 
        =左自己整列：フレックスエンド ; / * 垂直尾翼アライメントを* / 
    }