詳解JavaScript中的this指向問題
flex佈局的基本知識
首先介紹是什麼是flex佈局:
flex佈局就是一種新的佈局方案,通過為修改父div的display屬性,讓父元素成為一個flex容器,從而可以自由的操作容器中子元素(專案)的排列方式。
容器屬性
1.flex-direction屬性
取值:
row(預設):橫向排列,專案排列順序為正序1-2-3
row-reverse:同為橫向排列,但專案順序為倒序3-2-1
column :與row相反,為縱向排列,專案順序為正序1-2-3
column-reverse:同為縱向排列,專案順序為倒序3-2-1
2.flex-wap屬性
取值:
nowwap:不換行
wap:超出父容器寬度會自然換行
![在這裡插入圖片描述](https://img.796t.com/res/2021/02-07/21/82f9e7798f3e01e92f51aca724546035.png)
wrap-reverse:同樣表示換行,需要注意的是第一排會緊貼容器底部,而不是我們想象的專案6緊貼容器頂部,效果與wrap相反。
3.flex-flow屬性
flex-flow屬性是flex-deriction與flex-wrap屬性的簡寫集合,預設屬性為row nowrap,即橫向排列,且不換行,如果需要控制專案排列與換行
4.justify-content屬性
用於控制專案在橫軸的對齊方式
取值:
flex-start:即左對齊
flex-end:右對齊
center:居中
space-between:左右兩端對齊,即左右兩側專案都緊貼容器,且專案之間間距相等
space-around:為專案之間間距為左右兩側專案到容器間距的2倍
![在這裡插入圖片描述](https://img.796t.com/res/2021/02-07/21/26f83afe246544adf2bc205034a2bb0f.png)
space-evenly:為專案之間間距與專案與容器間距相等
![在這裡插入圖片描述](https://img.796t.com/res/2021/02-07/21/fdf8e22602f53b03ace323b46766ef39.png)
5.align-items屬性
用於控制專案在縱軸的對齊方式
取值:
stretch(預設):如果專案設定高度,或高度為auto,則佔滿整個容器
flex-start:專案在縱軸緊貼容器頂部
center:居中
flex-end:專案緊貼縱軸底部
baseline:目以第一行文字的基線為參照進行排列
注意,常理來說justify-content與align-items預設分別處理專案橫軸,縱軸的對齊方式,但如果我們修改了flex-direction為column,它們處理的軸向會交換,也就是justify-content處理縱軸,align-items處理橫軸。
6.align-content
用於控制多行專案的對齊方式,如果專案只有一行則不會起作用
取值:(大體和align-item的方式差不多)
stretch(預設):專案沒設定高度,或高度為auto情況下讓專案填滿整個容器
flex-start:頂部對齊
flex-end:底部對齊
center:居中
space-around:與justify-content保持一致,即專案之間間距為上下兩端專案與容器間距兩倍。
space-evenly:專案之間間距與專案到容器之間間距相等
space-between:上下兩側專案緊貼容器
專案屬性
1.order:預設0
2.flex-grow:預設0
用於決定專案在有剩餘空間的情況下是否放大,預設不放大
假設預設三個專案中前兩個個專案都是0,最後一個是1,最後的專案會沾滿剩餘所有空間
假設只有第一個專案預設為0,後面兩個專案flex-grow均為1,那麼後兩個專案平分剩餘空間
假設第一個專案預設為0,第二個專案為flex-grow:2,最後一個專案為1,則第二個專案在放大時所佔空間是最後專案的兩倍
3.flex-shrink:預設1
用於決定專案在空間不足時是否縮小,即空間不足時大家一起等比縮小
但如果某個專案flex-shrink設定為0,則即便空間不夠,自身也不縮小
上圖中的第二個專案flex-shrink為0,所以自身不會縮小
4.flex-basis:預設auto
用於設定專案寬度,預設auto時,專案會保持預設寬度,或者以width為自身的寬度,但如果設定了flex-basis,權重會width屬性高,因此會覆蓋widtn屬性
上圖中先設定了flex-basis屬性,後設置了width屬性,但寬度依舊以flex-basis屬性為準
5.flex:預設auto,0,1
flex屬性是flex-grow,flex-shrink與flex-basis三個屬性的簡寫,用於定義專案放大,縮小與寬度。
6.align-self:預設auto
用於讓個別專案擁有與其它專案不同的對齊方式
如:對專案二有align-self:flex-end
總結:
flex佈局幾乎就是這些常用的,如果後續還有的話,我會加以補充。