之前因為客戶端引入Facebook的YOGA庫士败，以及微信小程序學習的原因述召，對于前端的布局有一定的了解心铃。書讀百遍其義自見，不經(jīng)常使用的工具還是需要時不時學習谦炒，比如Flexbox和Position布局贯莺。
1. 流式布局
在未設置其他任何布局的情況下，網(wǎng)頁默認采用流式布局方式编饺。有幾點需要注意一下:
① 行內標簽可以嵌套在塊級標簽中乖篷，但是反之不可
塊級標簽不能嵌套到形內標簽的原因是: 塊級標簽的新開一行的規(guī)則并不會改變响驴，所以并沒有任何效果
② 通過diplay可以修改為行內標簽還是塊級標簽
③ order 調整item顯示的順序透且，可設置正數(shù)、負數(shù)和0（ item默認的order = 0）
如果要放置在前面，需設置一個較小的值!
2. Flexbox
flex-direction
彈性布局中對于內部items的方向設置值秽誊，主要是會影響主軸的方向鲸沮。可取值: row 锅论、row-reverse 讼溺、column、column-reverse.
① row: 默認值
② row-reverse
flex布局主軸默認為水平方向最易，設置row-reverse時并不是簡單的左右偏移怒坯，而是變換了主軸的方向。
③column
④column-reverse
設置為column時藻懒，相當于把主軸和交叉軸進行了交換剔猿，整體布局以垂直方向顯示。
Justify-content
決定了主軸方向上items對齊的方式嬉荆，可取值: flex-start归敬、flex-end、center鄙早、space-around汪茧、space-evenly和space-between。flex-start限番、flex-end和center很好理解舱污，以上圖中的start和end方向對齊。
①space-around
左右邊距是中間間距的1/2（items之間的間距相等）
②space-evenly
間距和邊距值相等
align-items
決定了交叉軸方向的對齊方式扳缕，可取值: flex-start慌闭、flex-end、center躯舔、baseline驴剔、stretch。
①stretch
拉伸到和容器相同的高度粥庄，但是前提是: 不能限制item的高度丧失，不然不起作用！
3. Position
relative
相對布局惜互，相對于元素在流式結構中的位置布讹。可取值: 正數(shù)训堆、負數(shù)和0.因為可以設置負數(shù)和正數(shù)描验，所以bottom: 20px == top: -20px
以圖例進行說明:
關于left與top和單詞本身的含義好像有點差異，為什么設置left反而往右邊偏移的呢坑鱼？設置top反而往下方偏移呢膘流？原因就是網(wǎng)頁CSS坐標方向:
absolute
絕對布局絮缅，相對于父視圖的區(qū)域進行絕對布局。如果父視圖中沒有非static的元素那么就能在整個屏幕中大顯身手了呼股；如果存在則只能在父視圖的區(qū)域內活動耕魄。設置元素位置值：left、top彭谁、right吸奴、bottom，需要注意和relative的差異:
這些位置值就等同于單詞的含義缠局，距離右邊距的偏移量则奥，可設置正數(shù)、負數(shù)和0.
iOS程序員的前端學習之路狭园，開車了鎖死不下車了逞度！
