排列子元素:align-items(3/6)
CSS3 display:flex 樣式

CSS3 display:flex 樣式

當一個容器以 display:flex 樣式配置,flex-direction 樣式進一步決定其中子元素以水平或是垂直排列,而 justify-content 則以指定的基準決定子元素在容器空間中的配置,接下來,你還能指定 align-items 樣式,決定子元素彼此之間以何種方式排列對齊。

現在建立一個容器,於其中配置五個 div 元素,並設定了每一個元素的高度與寬度。

<div class="flexcontainer">
        <div>default</div>
        <div>default</div>
        <div>default</div>
        <div>default</div>
        <div>default</div>
</div>

容器的類別樣式 flexcontainer 設定如下:

div.flexcontainer {
            border: 1px dotted blue;
            margin: 10px;
            display: flex;         
            width: 1000px;
            height:300px;
        }

其中的 div 元素分別設定了不同的高度與背景顏色,在預設的情形下,會呈現以下的結果,子元素以頂端為對齊基準排列:

default
default
default
default
default

現在只要改變容器的 align-items 樣式值,即能調整其中子元素的對齊方式,可能的值有以下幾種:

center:以子元素的中央為對齊基準。
flex-start:以子元素的頂端為對齊基準。
flex-end:以子元素的底部為對齊基準。
baseline:以子元素中的內容基底為對齊基準。
stretch:伸展子元素以對齊。

現在另外配置其它五組,並分別指定上述的五個樣式值,得到以下的效果。

center
center
center
center
center

flex-start
flex-start
flex-start
flex-start
flex-start

flex-end
flex-end
flex-end
flex-end
flex-end

baseline 會以內容的基線為基礎進行排列,例如以下的結果,其中的文字大小不一,而方塊會以文字的底部為基線進行對齊排列。

baseline
baseline
baseline
baseline
baseline

最後這一組是 align-items: stretch 樣式效果,為了呈現子元素的配置,因此每一個子元素的 height 設為 auto ,如此一來會自動延伸擴展至填滿容器,效果如下:

stretch
stretch
stretch
stretch
stretch

CSS3 display:flex 樣式


沒有留言: