flex布局－常用布局

在使用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
}

 一个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;
}