之前因為客戶端引入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í)之路，開車了鎖死不下車了！