多行自動配置:flex-wrap(4/6)
CSS3 display:flex 樣式

CSS3 display:flex 樣式

設定為 flex 模式顯示時,當容器內的子元素排列超出可容納的邊界範圍,為了完整呈現,所有子元素的大小將會依容器的空間動態壓縮,現在配置一段 HTML 如下:

<div class="flexcontainer">
        <div class="ele">wrapA</div>
        <div class="ele">wrapB</div>
        <div class="ele">wrapC</div>
        <div class="ele">wrapD</div>
        <div class="ele">wrapE</div>
        <div class="ele">wrapF</div>
</div>

其中的 flexcontainer 類別樣式設定為 display: flex ,並且指定 width: 600px 寬度,其中的六個子元素被動態縮減以完整呈現如下:
wrapA
wrapB
wrapC
wrapD
wrapE
wrapF
如你所見, flex 的配置可能導致子元素的內容被壓縮,現在進一步設定 flex-wrap 樣式為 flex-wrap:wrap ,無法容納的子元素現在將以新行呈現。
wrapA
wrapB
wrapC
wrapD
wrapE
wrapF
flex-wrap另外有一個樣式值 wrap-reverse,設定為此值將要求子元素逆向排列,因此最後一列會先排,結果如下:
wrapA
wrapB
wrapC
wrapD
wrapE
wrapF
如果空間不需新行即足夠容納子元素,則 wrap-reverse 沒有影響。

更進一步的, wrap-reverse 可以搭配 align-content ,指定其中子元素的配置,例如以下的配置:
align-content:

flex-end
align-content:

flex-end
align-content:

flex-end
align-content:

flex-end
align-content:

flex-end
其中子元素的容器將 align-content 樣式設定為 flex-end ,其中的子元素則往下對齊,你可以根據自己的需求,指定其它不同的樣式值,可用的值如下:

stretch
flex-start
flex-end
center
space-between
space-around

樣式值的意義同 「排列子元素:align-items(3)CSS3 display:flex 樣式」這篇討論的,請自行參考。

CSS3 display:flex 樣式





沒有留言: