關于 flex 屬性特點的整理,望指正。
根據文中例子以及多次測試得出以下結論,供學習者參考并且希望大佬指出我理解中的錯誤之處。
flex屬性具備以下特點:
設置 display:flex 屬性,可以讓所有子級元素在同一行中顯示。
flex需要添加在父級元素上,改變子級元素的排列方式。
flex屬性默認為靠父級元素頂部并從左往右依次排列,并且子級元素和父級元素沒有間隙。
一般情況下,子級元素的寬度會隨著父級元素寬度的改變而改變,部分標簽除外:如<img>標簽,圖片的最小寬度不會隨著父級元素的寬度改變而改變。
一般情況下,多個子級元素若寬度不同,父級元素的寬度改變時,子級元素也會按各自寬度的比例去改變,部分標簽除外,如<img>標簽,圖片的最小寬度不會隨著父級元素寬度的改變而改變。
若子級元素高度大于父級元素的高度,那么子級元素就會超出父級元素的顯示范圍。
若父級元素沒有定義高度,那么父級元素的高度會以高度最高的子級元素為準。
若有子級元素沒有定義高度,那么沒定義高度的子級元素就會默認與父級元素的高度相同。若此時父級元素沒有定義高度,那就參考第7條。
flex屬性僅應用于該元素的直接后代,不會應用于多級后代元素。
使用flex屬性后,其內包含的直接后代元素,哪怕是行內元素,也會具有塊狀元素的特點,支持設置高度和寬度以及上下左右的邊距。
2021-01-18
還有個問題想請教,我在測試時,為某個box 寫上 display: inline ,希望把它改為內聯元素,測試他是否還會與其他塊狀元素排列在同一行,結果這個定義并沒有作用,這個box盡管定義為了inline屬性,但是他依然是以塊狀元素的形勢展現的,CSS中寬度和高度的定義依然有效。是因為在flex中這個display:inline 沒用嗎?還是其他原因?