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