這些是我在MDN教程上的學習筆記，教程地址 ：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
注：不能作為教程看，只能作為溫習筆記看，要看教程請去上面鏈接或者其他教程資源，
flexbox是線性排布的，不是橫就是豎（寬度不夠會換行），
在要flexbox的div容器上寫display:flex，這樣子元素就變成flex元素了，默認水平排布（有一些文字豎著讀的國家，排布方式就是垂直），
display:inline-flex就會讓容器像inline的特性一樣，但是其內部內容還是flex的，
下圖是flex容器的布局方式（默認是水平排布，也就是main axis的方向）：
以下css屬性是在flex容器上設定的：
flex-direction屬性可以設定為column，row（默認），row-reverse和column-reverse，
flex-wrap屬性可以設定為wrap和no-wrap(默認)，當flex容器內元素太多超出寬度的時候，wrap的話就會換行，no-wrap則會溢位，
flex: 200px可以設定flex元素的最小寬度為200px，容器不夠大時，看flex-wrap屬性選擇換行或者溢位；換行后，新行如果有多余空間，新行的元素會使用掉，
flex-flow:row wrap 可以快捷設定flex-direction和flex-wrap，
對齊設定
align-items屬性（flex容器上設定）可以設定的值為：
stretch （默認，cross-axis方向拉伸整個高度），
center （cross-axis方向的中間，就是高度中間），
flex-start （cross-axis方向的開始，就是頂邊），
flex-end （cross-axis方向的結束，就是底邊），
單獨為某個flex元素設定不同的cross-axis方向的對齊方式，使用align-self，取值和align-items一樣，
justify-content屬性（flex容器上設定）設定main-axis方向也就是水平的對齊方式，值為：
flex-start（默認，靠左邊）
flex-end（靠右邊）
center（靠中間）
space-around（均勻分布并且相鄰和左邊邊都有空白隔開）
space-between（均勻分布，僅相鄰之間元素有空白隔開)
space-evenly（均勻分布，相鄰之間的空白寬度和左右兩邊的空白寬度都一樣大），
以下css屬性是在flex元素上設定的：
在flex元素上設定flex:1;屬性，可以使其寬度在整個容器內占比為1，
order屬性可以設定元素排列順序，值越大排越后邊，默認為0，可以是負值，
justify-self和align-self可以單獨為這個元素設定main-axis和corss-axis的對齊方式，取值和align-items和justify-content一樣，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/125605.html
標籤：其他
上一篇：三步帶你開發一個短鏈接生成平臺
下一篇：CSS Grids教程學習筆記