在打開網(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ì)齊
新聞熱點(diǎn)
疑難解答
圖片精選