【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 樣式功能相當強大,這一系列的文章針對相關的樣式設定進行討論。


沒有留言: