[CSS3] boxレイアウト

by tea4two

HTML

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

CSS

#container {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    /* display: box;
    display: -moz-box;
    display: -webkit-box;
     */
}
#box1 {
    width: 100px;
    background: yellow;
}
#box2 {
    width: 200px;
    background: pink;
}