文章來源:http://www.zhufengpeixun.cn/article/173

一、前言

Flexbox 是一個 CSS3 的盒子模型 ( box model ),顧名思義它就是一個靈活的盒子 ( Flexible Box ),為什麼最近這個屬性才紅起來呢?最主要也是因為 CSS3 的規(guī)范終于普及 ( 或 IE 終于敗亡 ),加上行動裝置的發(fā)展促成了響應式布局興起,自適應長寬彈性相當大的 Flexbox 就趁勢而起了。

第一步要來看 Flexbox 的盒子模型,根據(jù) W3C 文章所描述,flex 的盒子模型如下圖所呈現(xiàn),與一般的盒子模型不同的地方,在于 Flexbox 的盒子模型具有水平的起點與終點 ( main start、main end ),垂直的起點與終點 ( cross start、cross end ),水平軸與垂直軸 ( main axis、cross axis ),然后元素具有水平尺寸與垂直尺寸 ( main size、cross size ),這些都是相當重要的布局規(guī)畫。

seo優(yōu)化培訓,網(wǎng)絡推廣培訓,網(wǎng)絡營銷培訓,SEM培訓,網(wǎng)絡優(yōu)化,在線營銷培訓

再來我們先看看 Flexbox 有哪些屬性,也可參考MDN的使用 CSS 彈性盒子

  • display

  • flex-direction

  • justify-content

  • align-items

  • align-self

  • align-content

  • flex-wrap

  • order

  • flex

網(wǎng)友評論