2.Flex【彈性盒】
1.設置彈性盒
display flex
display -webkit-flex //蘋果內(nèi)核需加
display inline-flex //行內(nèi)元素
2.主軸排列方向
flex-direction row //水平
flex-direction column //垂直
3.換行方式
flex-wrap nowrap //默認不拆行列
flex-wrap wrap //必要時拆行列
4.主軸對齊方式
justify-content center //主軸水平居中
justify-content space-between //兩端對齊
justify-content space-around //分散對齊
justify-content flex-start //左對齊
justify-content flex-end //右對齊
5.側(cè)軸對齊方式
align-items center //主軸垂直居中
align-items flex-start //左/上對齊
align-items flex-end //右/下對齊
align-items baseline //基線對齊
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。