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

 

 

一个页面，有上下两个元素，垂直水平居中

第一种差在 flexDirection:column  指定在垂直方向

html

<div style={styles.emptyPage}>
    <img src={empty} alt='empty png' style={styles.emptySize} />
    <div className='fs18 mt10 lightGrayText'>{this.props.text}</div>
 </div>

css

emptySize:{
    width:'60%'
},
emptyPage:{
    width:100%;
    height:500px;
    backgroundColor:#F2F3F7;

    display:flex;
    flexDirection:column;
    alignItems:center;
    justifyContent:center;
}

 

一个div，里面有3个元素，这三个元素的排列方式以左，中，右的方式排列

.mainDiv{
　　display: flex;
　　flex-direction: row;
　　justify-content: space-between;
}

 

 

一个div，里面有两个元素，像左对齐，第一个元素宽度固定，第二个元素自适应

.mainDiv{
　　display: flex;
　　flex-direction: row;
　　justify-content: flex-start;
 }
.firstDiv{
　　width: 80px;
　　text-align: right;
　　color:#999999;
　　flex-shrink:0;
}