今天在睡懶覺、上課嫌吠、然后打了一晚上游戲中度過了止潘,導致到現在我今天的筆記依然沒寫。辫诅。凭戴。眼看時間實在不允許了,就加先設定個標題明天再寫吧炕矮。恩么夫!就這么辦吧!
在我的上一篇內容中我又提到過flex布局肤视,這里就接上上一篇的內容寫一下這個內容档痪。其實在這個內容上我的文章可能并不是很好的學習文章(這個內容最好還是圖文結合才能很好的理解,我實在做不出合適的圖钢颂,哭)钞它,在這里我推薦大家去百度一下看看別的內容會更好。
學習flex布局具體的屬性這些內容之前殊鞭,我們先要學習兩個概念性的內容遭垛。
1,容器(flex container)和 項目(flex item)
flex布局簡單來說就是一個父元素和數個子元素操灿,父元素和子元素都有一些屬性锯仪,設定后就會呈現出一種布局的方法。而這里的父元素就是容器趾盐,子元素就是項目庶喜。這個概念搞懂了其實就很容易理解了,flex布局中容器和項目也各有各自不同的屬性救鲤。
2久窟,主軸(main axis)和 交叉軸(cross axis)
在容器中又存在兩條軸,主軸(main axis)和交叉軸(cross axis)本缠。這兩個軸屬于概念性的東西斥扛,在視圖上不會顯示,但卻是后面許多屬性的基準丹锹。在默認情況下可以簡單的當成直角坐標系中的X軸和Y軸(就是主軸是從左到右稀颁,交叉軸從上到下)。
主軸起始位置和容器邊界交接處叫main start楣黍,結束位置和容器邊界交接處叫main end匾灶;交叉軸其實位置和容器邊界交接處叫cross start,結束位置和容器邊界交接處叫cross end租漂。其實就是很直白的內容阶女,開始就是start颊糜,結束就是end。這個概念在后面的屬性中非常重要所以這里多提一下张肾。
這篇文章我本來打算一次寫完的芭析,但感覺這個內容實在有點多,就先寫上這些前置內容吞瞪,把剩下的部分單獨再寫一次吧(其實我就是感覺有點多想混一下)。但這里我還是得說一下我不推薦大家通過我這篇文章學習這一內容驾孔,我的文章大多是一種對自己理解的總結和復習芍秆,本就不那么嚴謹和專業(yè),同時這一內容是需要圖文結合的翠勉,不然真的很難理解妖啥。