3 種居中方式, 在頁面布局中經(jīng)常用到, 現(xiàn)作一記錄。
第一種 ? 水平居中
類似這樣寫法
display: ?flex;
flex-direction: ?column; ? ? ? ?????????//垂直布局
align-items: ?center; ? ? ? ? ? ? ? ? ? ?// 水平居中? ??
justify-content: ?space-around; //垂直方向分散布局
第二種 ?垂直居中
類似這樣寫法
display: ?flex;
flex-direction: row; ? ? ? ? ?//水平布局 ? ? ?
align-items: center; ? ? ? ?// 垂直居中
第三種 ?水平垂直布局
可以是類似這樣寫法:
display: flex;
flex-direction: column; ?// 垂直布局
align-items: center; ? ? ? ?// 水平居中
justify-content: ?center; ?//垂直居中文章來源:http://www.zghlxwxcb.cn/news/detail-773467.html
width: ? 33%; ? ? ? ? ? ? ? ? ? //寬度占屏幕的1/3? ? ? ? ?文章來源地址http://www.zghlxwxcb.cn/news/detail-773467.html
到了這里,關于微信小程序23__flex布局 相關的3種居中: 水平居中_垂直居中_水平垂直居中的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!