[CSS3] boxレイアウト（子要素の配置）

by tea4two

HTML

<p>子要素の設定</p>
<div id="container">
    <div id="box1">BOX1</div>
    <div id="box2">
        BOX2<br />
        内容を充実させます。<br />
        現在mozilla系、webkit系のみでflexがサポートされています。<br />
        プログレッシブ・エンハンスメントととして全部書いておくことを推奨します。
    </div>
    <div id="box3">
        ３つ目の要素です<br />
        ２行目は適当です。
    </div>
</div>

CSS

#container {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    
    border: 1px dashed lightblue;
    width: 100%;
    
    /* 横配置 : justify-content(box-pack)
    flex-start, flex-end, center, space-between, space-around*/
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -moz-box-pack: end;/* FFではjustifyは無効20136月 */
    
    /* 縦位置 : align-items(box-align)
    flex-start, flex-end, center, baseline, stretch */
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -moz-box-align: start;
}
#box1 {
    width: 100px;
    background: yellow;
    
    /* 縦位置個別 */
    align-self: center;
    -webkit-align-self: center;
    -moz-align-self: center;
}
#box2 {
    width: 200px;
    background: pink;
}
#box3 {
    width: 150px;
    background: lightgreen;
}