1.彈性布局
1>flex-direction屬性
決定主軸的方向 flex-direction: row | row-reverse | column | column-reverse;
2>flex-wrap屬性 可用來換行
flex-wrap: nowrap | wrap | wrap-reverse;
3>justify-content屬性 項目在主軸上的對齊方式
box {justify-content: flex-start | flex-end | center | space-between | space-around;}
4>align-items屬性 項目在交叉軸上如何對齊
align-items: flex-start | flex-end |center | baseline | stretch;
5>align-content屬性 多根軸線的對齊方式
align-content: flex-start | flex-end |center | space-between | space-around | stretch;
6>order: <integer>屬性定義項目的排列順序 數(shù)值越小，排列越靠前，默認(rèn)為0
7>flex-grow屬性 項目的放大比例，默認(rèn)為0
flex-grow: <number>; /* default 0 */
8>flex-shrink屬性 項目的縮小比例
flex-shrink: <number>; /* default 1 */
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布，希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
