http://www.w3.org/html/ig/zh/wiki/Css3-flexbox


<div style="display: flex">

    <!-- 伸縮項目：塊級子元素 -->
    <div id="item1">塊</div>

    <!-- 伸縮項目：浮動元素 ― 使用者代理會忽略浮動 -->
    <div id="item2" style="float: left;">浮動</div>

    <!-- 伸縮項目：包著行內內容的無名塊盒 -->
    無名項目 3

    <!-- 伸縮項目：行內子元素 -->
    <div id="item4">span</div>

    <!-- 伸縮項目：<span> 變成 'display: block'，所以沒有行內塊現象。-->
    <span>
        項目 5
        <div id=not-an-item>項目 5</div>  /******* : id="not-an-item"   *****/
        項目 5
    </span>
</div>