漫漫前端之路 CSS -- Flexbox和Position布局講解

之前因為客戶端引入Facebook的YOGA庫,以及微信小程序?qū)W習(xí)的原因,對于前端的布局有一定的了解。書讀百遍其義自見,不經(jīng)常使用的工具還是需要時不時學(xué)習(xí),比如Flexbox和Position布局。


1. 流式布局

在未設(shè)置其他任何布局的情況下,網(wǎng)頁默認(rèn)采用流式布局方式。有幾點需要注意一下:

① 行內(nèi)標(biāo)簽可以嵌套在塊級標(biāo)簽中,但是反之不可

塊級標(biāo)簽不能嵌套到形內(nèi)標(biāo)簽的原因是: 塊級標(biāo)簽的新開一行的規(guī)則并不會改變,所以并沒有任何效果

② 通過diplay可以修改為行內(nèi)標(biāo)簽還是塊級標(biāo)簽
③ order 調(diào)整item顯示的順序,可設(shè)置正數(shù)、負(fù)數(shù)和0( item默認(rèn)的order = 0)

如果要放置在前面,需設(shè)置一個較小的值!

2. Flexbox

flex-direction

彈性布局中對于內(nèi)部items的方向設(shè)置值,主要是會影響主軸的方向。可取值: row 、row-reverse 、column、column-reverse.

① row: 默認(rèn)值
main axis: 水平從左至右
② row-reverse
main axis: 水平從右至左

flex布局主軸默認(rèn)為水平方向,設(shè)置row-reverse時并不是簡單的左右偏移,而是變換了主軸的方向。

③column
main axis: 垂直從上至下
④column-reverse
main axis: 垂直從下至上

設(shè)置為column時,相當(dāng)于把主軸和交叉軸進(jìn)行了交換,整體布局以垂直方向顯示。

Justify-content

決定了主軸方向上items對齊的方式,可取值: flex-start、flex-end、center、space-around、space-evenly和space-between。flex-start、flex-end和center很好理解,以上圖中的start和end方向?qū)R。

①space-around

左右邊距是中間間距的1/2(items之間的間距相等)

space-around
②space-evenly

間距和邊距值相等

space-evenly
align-items

決定了交叉軸方向的對齊方式,可取值: flex-start、flex-end、center、baseline、stretch。

①stretch

拉伸到和容器相同的高度,但是前提是: 不能限制item的高度,不然不起作用!

stretch

3. Position

relative

相對布局,相對于元素在流式結(jié)構(gòu)中的位置。可取值: 正數(shù)、負(fù)數(shù)和0.因為可以設(shè)置負(fù)數(shù)和正數(shù),所以bottom: 20px == top: -20px

以圖例進(jìn)行說明:

相對布局

關(guān)于left與top和單詞本身的含義好像有點差異,為什么設(shè)置left反而往右邊偏移的呢?設(shè)置top反而往下方偏移呢?原因就是網(wǎng)頁CSS坐標(biāo)方向:

css坐標(biāo)方向示例
absolute

絕對布局,相對于父視圖的區(qū)域進(jìn)行絕對布局。如果父視圖中沒有非static的元素那么就能在整個屏幕中大顯身手了;如果存在則只能在父視圖的區(qū)域內(nèi)活動。設(shè)置元素位置值:left、top、right、bottom,需要注意和relative的差異:

絕對布局

這些位置值就等同于單詞的含義,距離右邊距的偏移量,可設(shè)置正數(shù)、負(fù)數(shù)和0.


iOS程序員的前端學(xué)習(xí)之路,開車了鎖死不下車了!


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容