【070-480】試験対策その2-5 高度なレイアウトとアニメーション | P1

やっと5つ目のセッションです。あと６セッション～！

このセッションで使う「レガシー・レイアウト」は、従来のレイアウト、という意味です。

Legacynlayout

前のセッションでは「表示形式」を学びました。今回は「表示位置」です。

positioning
display
float
z-index

Positioning

#id01 {
    position : absolute;  /*絶対位置を指定*/
    top      : 25px;      /*コンテナまたは画面上部からの位置*/
    left     : 50px;      /*コンテナまたは画面左からの位置*/
    z-index  : 0;         /*z-indexが大きくなるほど、前に表示される*/
}

#id02 {
    position : relative;  /*相対位置を指定*/
    top      : 25px;
    left     : 50px;
    z-index  : 1;
} 

Display

.vanish {
    display      : none;    /*要素を表示しない*/
}

.centered {
    display        : table-cell;    /* 縦方向も制御できる */
    min-height     : 200px;
    min-width      : 200px;
    text-align     : center;    /* 中央ぞろえ */
    vertical-align : middle;
    border         : 1px solid #ff4444;
} 

text-alignでは水平方向しか指定できない。
vertical-alignではできないが、table-cellなら縦方向の高さを揃えることができる。

もっとほかの方法で中央ぞろえをするには？
実際はテーブルではないのに「table-cell」を使うのは理想的ではない。

そこでFlexboxです！

Flexbox

horizontal or vertical
packing
alignment
flex
wrapping

Flexboxを使う利点は？

レイアウトを水平でも垂直でも指定できる、上から下でも下から上でも左から右でも右から左でも。

名前空間

サンプルでは、すべてのスタイル属性が.flexboxで始まる。
いま見ているのはシングル・ページ・アプリケーションで、全て同じページに入っている。
アプリ全体で共有したくないものにはネームスペースをつけて区別する。

.flexbox #flexbox1 {
    margin-top: 20px;
    display: -ms-flexbox;
    width: 100%;
    -ms-flex-pack: distribute;    /* 子要素間の余白を表す ※ */
    border: 1px solid gray;
}

.flexbox #flexbox1 > div { min-width: 80px; min-height: 80px; }
.flexbox #flexbox1 > div:nth-child(1) { background-color: red; }
.flexbox #flexbox1 > div:nth-child(2) { background-color: green; }
.flexbox #flexbox1 > div:nth-child(3) { background-color: blue; }

※MSDNで調べても-ms-flex-packにdistributeという値は出てこない……？

Flexboxは非常にシンプル

表示形式に「-ms-flexbox」を指定するだけでOK。

フレキシング

ボディビルダーの屈伸運動のようなもの(笑)

.flexbox #flexxingFlexbox {
    margin-top: 20px;
    display: -ms-flexbox;
}

.flexbox > div { min-width: 80px; min-height: 80px; }
.flexbox > div:nth-child(1) { background-color: red; -ms-flex: 1 0 auto;}
.flexbox > div:nth-child(2) { background-color: green; -ms-flex: 2 0 auto;}
.flexbox > div:nth-child(3) { background-color: blue; } 

-ms-flexは3種類の値を指定。

1つめは、可変の相対量。
2つ目は推奨サイズ、任意のサイズを指定できる。ただしどんなサイズになるかは、親boxに依存する。
3つ目の特徴はwrap。はみ出した部分の処理をoverflowで指定する必要はなく、wrapで指定すればOK。

.flexbox #wrappingFlexbox {
    margin-top: 20px;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;    /*折り返す*/
    width: 100%;
}

.flexbox #wrappingFlexbox > div {
    min-width: 140px;
    min-height: 140px;
    background-color: gray;
    margin: 5px;
    font-size: 60px;
    padding: 15px;
}

.flexbox #wrappingFlexbox > div:nth-child(7) {
    background-color: red;
} 

2013/12時点ではベンダープリフィクスがつかないW3C標準ができ、IE11でもそちらに対応しているようです。
http://msdn.microsoft.com/ja-jp/library/ie/dn265027(v=vs.85).aspx