在使用flex布局,老是需要去查资料,很多常用的,知道大概,可还是需要去过一遍,这里记录一下几个常用的flex布局
一个div,内容垂直居中
html
<div className='topHead'> <img src='/images/highLevel.png'/> </div>
css
.topHead { width: 100%; height: 100px; display: flex; align-items: center; }
注意:这个高度是一定要的,不然没有下效果
一个div,内容既要垂直居中,也要上下居中
html
<div className='topHead'> <img src='/images/highLevel.png'/> </div>
css
.topHead { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center }
扫描二维码关注公众号,回复:
470194 查看本文章
一个div,内容两块,往两边靠
这种场景经常出现在设置里面,左边一个内容,右边一个内容
html
<div className='bothSides'> <span className='ml10'>客服QQ</span> <div className='mr10'> <span>123456</span> <Icon type="copy" /> </div> </div>
css
.bothSides{ height: 50px; display: flex; align-items: center; justify-content: space-between; } .ml10{ margin-left:10px; } .mr10{ margin-right:10px; }