南寧小程序開發,挑戰百日學習計劃第27天(flex彈性佈局6大屬性)

彈性佈局的6大屬性,我這幾天才搞明白,所以今晚順便更新, 學習計劃鐵定是不能停止的,熱愛學習不能自拔。哈哈
最近我的網站已經可以被收錄了。感覺挺不錯!,就等百度給流量,開始把公司做大做強

南寧小程序開發 www.zkelm.com

flex 6大屬性
1.flex-directive:盒子的排序方向 row |row-reverse |column|column-reverse

如圖
在這裏插入圖片描述
2.justify-content:定義了項目在主軸上的對齊方式
justify-content:flex-start | flex-end | center | space-between | space-around |space-evenly

重點 space-evenly 這個的具體佈局樣式如圖
在這裏插入圖片描述
space-between:表現的形勢如圖
在這裏插入圖片描述

3.align-items:屬性定義flex子項在flex容器的當前行(縱軸)方向上的對齊方式
align-items:flex-start | flex-end | center | stretch | baseline

在這裏插入圖片描述

flex-wrap:項目的換行模式:flex-wrap: wrap | nowrap | wrap-reverse

默認爲不換行:nowrap
在這裏插入圖片描述
好咧,總算把flex搞明白了一大半,剩下的 是項目屬性 6個。下期在更新

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章