(一)flex佈局
1:flex彈性佈局(容器的屬性)
flex-direction
flex-wrap
flex-flow
justify-content(主軸的對齊方式)
align-items align-items屬性定義專案在交叉軸上如何對齊。
align-content align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
2:flex-direction屬性決定主軸的方向
flex-direction: row | row-reverse | column | column-reverse;
3:flex-wrap: nowrap | wrap | wrap-reverse;
4:flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;
5:justify-content屬性定義了專案在主軸上的對齊方式。//注意主軸側軸
justify-content: flex-start | flex-end | center | space-between | space-around;
6:align-items: flex-start | flex-end | center | baseline | stretch;
align-items屬性定義專案在交叉軸上如何對齊。(側軸)
stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
7:align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
2:專案的屬性()
order flex-grow flex-shrink flex-basis flex align-self