深入解析CSS Flexbox | display flex意思
Flexbox是一個CSS3的盒子模型(boxmodel),顧名思義它就是一個靈活的盒子(FlexibleBox),為什麼最近這個屬性才紅起來呢?最主要也是因為CSS3的規範終於普及(或IE終於敗亡),加上行動裝置的發展促成了響應式布局興起,自適應長寬彈性相當大的Flexbox就趁勢而起了。Flexbox模型概念第一步要來看Flexbox的盒子模型,根據W3C[1]文章所描述,flex的盒子模型如下圖所呈現,與一般的盒子模型不同的地方,在於Flexbox的盒子模型具有水平的起點與終點(mainstart、mainend),垂直的起點與終點(crossstart、crossend),水平軸與垂直軸(mainaxis、c...
Flexbox 是一個 CSS3 的盒子模型 ( box model ),顧名思義它就是一個靈活的盒子 ( Flexible Box ),為什麼最近這個屬性才紅起來呢?最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 ),加上行動裝置的發展促成了響應式布局興起,自適應長寬彈性相當大的 Flexbox 就趁勢而起了。
Flexbox 模型概念第一步要來看 Flexbox 的盒子模型,根據 W3C[1] 文章所描述,flex 的盒子模型如下圖所呈現,與一般的盒子模型不同的地方,在於 Flexbox 的盒子模型具有水平的起點與終點 ( main start、main end ),垂直的起點與終點 ( cross start、cross end ),水平軸與垂直軸 ( main axis、cross axis ),然後元素具有水平尺寸與垂直尺寸 ( main size、cross size ),這些都是相當重要的布局規畫。
Flexbox 屬性介紹再來我們先看看 Flexbox 有哪些屬性,也可參考 W3C css3 flexbox css3-flexbox[2]:
display flex-direction justify-content align-items align-self align-content flex-wrap order flexdisplay
display 是我們熟知的 CSS 屬性,對於 Flexbox 來說,多了有兩種方式可以設定,預設為「flex」,其布局方式與 block 幾乎類似,都會強迫換行,但設定display:flex的子元素卻具備了更多彈性的設定,此外另外一種方式則是「inline-flex」,和 inline-block 也是幾乎雷同,意義上都是一個display:flex的元素外面包覆display:inline的屬性,在後方的元素不會換行。( 範例:css-flexbox-demo1.html[3] )
CSS:
.flex, .inline-flex{ width:100px; height:50px; border:1px soli...