子元素空間配置比例:flex 比例樣式(5/6) CSS3 display:flex 樣式

CSS3 display:flex 樣式

在預設的情形下,設定了 display:flex 樣式容器中的子元素,會等比例分配以填滿整個容器空間,以下述的配置為例:

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

將 flexcontainerone 類別樣式設定為 display:flex,將呈現以下的效果:

A
flex
B
flex
C
flex
D
flex
E
flex

現在調整其中的 div 子元素如下:

<div id="flexcontainerone">
<div style="flex:1;">A<BR />flex:1</div>
<div style="flex:4;">B<BR />flex:4</div>
<div style="flex:2">C<BR />flex:2</div>
<div style="flex:2">D<BR />flex:2</div>
<div style="flex:1">E<BR />flex:1</div>
</div>

於每一個 div 元素中,設定對應的 flex 樣式值,如此一來,每一個 div 將依其所指定的比例佔據整個容器的空間。

A

flex:1
B

flex:4
C

flex:2
D

flex:2
E

flex:1

在「導入 Bootstrap」的 Bootstrap 入門說明中,讀者可以看到相同的設計概念,而運用 CSS3 的 flex 樣,你就可以達到類似的效果。

CSS3 display:flex 樣式



沒有留言: