子元素排列順序:order 樣式(6/6)
CSS3 display:flex 樣式

CSS3 display:flex 樣式

flex 樣式容器中的子元素會依標籤配置順序進行排列,例如以下的配置:

    <div class="flexcontainerone">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
    </div>

其中的五個 div 子元素將從 A 到 B 依序排列如下:

A
B
C
D
E

現在只要針對 div 子標籤設定 order 樣式,即可改變排列的順序,例如:

<div class="flexcontainerone">
        <div style="order: 1;">A<br />
            order:1</div>
        <div style="order: 4;">B<br />
            order:4</div>
        <div style="order: 2">C<br />
            order:2</div>
        <div style="order: 3">D<br />
            order:3</div>
        <div style="order: 5">E<br />
            order:5</div>
</div>

而為了方便說明,其中同時標示了 order 的樣式值,最後會得到以下的效果:

A

order:1
B

order:4
C

order:2
D

order:3
E

order:5

如你所見,這次排列的順序不再是A/B/C/D/E ,而是以 order 為依據排列。而除了相關的樣式特性,原有的 CSS 樣式設定亦會影響元素的呈現,例如調整上述的 div 標籤,指定其中第二個元素margin屬性為 auto 如下:

    <div class="flexcontainerone">
        <div style="order: 1;">A<br />
            order:1</div>
        <div style="order: 4;">B<br />
            order:4</div>
        <div style="order: 2;margin:auto;">C<br />
            order:2</div>
        <div style="order: 3">D<br />
            order:3</div>
        <div style="order: 5">E<br />
            order:5</div>
    </div>

現在重新瀏覽得到以下的結果:

A

order:1
B

order:4
C

order:2
D

order:3
E

order:5

flex 功能相當強大,也是未來CSS規格中影響元素配置最重要的功能之一,到目前為止,除了 IE10 以下的瀏覽器無法支援之外,其它主流瀏覽器均陸續完成支援,經過了數次的修訂,目前逐漸穩定下來,支援亦愈來愈完整,值得網頁設計開發人員注意。

CSS3 display:flex 樣式




沒有留言: