在打開網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)了火狐默認(rèn)首頁(yè)上有這樣一個(gè)東西。

第一個(gè)css屬性就沒有看懂。于是乎，開始各種找資料，各種看書。然后把對(duì)于css3伸縮布局盒（flexbox）模型的理解寫成文章，目的是對(duì)flexbox做一個(gè)簡(jiǎn)單的介紹。

1.關(guān)于css3中flexbox需要掌握的知識(shí)

因?yàn)閷?duì)于三列等高自適應(yīng)布局和水平垂直居中對(duì)齊需要一些對(duì)css3中flexbox基礎(chǔ)概念的理解，所以會(huì)對(duì)flexbox的概念做一個(gè)簡(jiǎn)單的介紹，以為后面的實(shí)例做一個(gè)鋪墊。本人一直認(rèn)為，不管學(xué)習(xí)任何知識(shí)，對(duì)于概念的理解都十分重要。

a：伸縮容器：是指通過display屬性顯示地給一個(gè)元素設(shè)置為flex或者inline-box（標(biāo)準(zhǔn)版本），這個(gè)容器就是一個(gè)伸縮容器。

b：伸縮項(xiàng)目：一個(gè)伸縮項(xiàng)目是伸縮容器的子元素。一個(gè)伸縮容器的內(nèi)容具有零個(gè)以上的伸縮項(xiàng)目--伸縮容器的每個(gè)子元素都會(huì)成為一個(gè)伸縮項(xiàng)目（包括文字，稱為匿名伸縮項(xiàng)目）。

c：伸縮流方向：是指伸縮容器中的主軸方向，可以理解成x軸的方向。伸縮流方向主要通過flex-direction屬性（標(biāo)準(zhǔn)標(biāo)準(zhǔn)版本）來(lái)設(shè)置，默認(rèn)值為row。

d：伸縮行換行：伸縮項(xiàng)目在伸縮容器中有時(shí)候會(huì)溢出伸縮容器。在伸縮容器屬性中，主要通過flex-wrap屬性來(lái)設(shè)置伸縮容器是否換行，默認(rèn)值為nowrap。

e：伸縮性：定義伸縮項(xiàng)目可改變伸縮容器的寬度或高度填補(bǔ)可用的空間。可以將伸縮容器的額外空間分發(fā)給其伸縮項(xiàng)目或?qū)⑺麄兛s小以防止伸縮項(xiàng)目溢出。

2.flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表