CSS3 display:flex 樣式(序)

CSS3 規格中新增了 flex 樣式值,當一個容器設定了此樣式值,其中的子元素將自動伸展填滿容器,考慮以下的配置:


一張圖片被放置於 div 形成的容器中,在預設的情形下,這張圖片會以原尺寸往左上角靠齊,現在調整其配置如下:


此次設定了 div 樣式為 display:flex ,如此一來其中的圖片將伸展高度以填滿整個容器區域。

CSS3 規格製訂過程中, flex 樣式經過了數次的修訂,最早是 display:box ,然後改成 display:flexbox ,最新的修訂是 display:flex ,此規格已進入 CR 階段,沒有意外的話應該會定案了,而 Chrome 與 Firefox 均支援了最新的規格 display:flex , IE10 還未支援。

善用此樣式可以快速建立彈性配置的網頁版面,以純粹的 div 元素配置示範:
flex
flex
其中配置的兩個灰色方塊是 div 元素,由於配置於 display:box 樣式設定的容器中,會自動延展高度並往左靠齊,在正常的情形下預設呈現如下, div 會依序垂直配置,而且以內容為依據調整高度。
no flex
no flex
flex 樣式功能相當強大,這一系列的文章針對相關的樣式設定進行討論。


沒有留言: