當專案裡實現自適應佈局的時候，使用到了flex彈性佈局

比如左邊div 400px，右邊div 自適應寬度

可以這樣實現

.guideContent{
    display: flex;
}
.guideContent .left{
    width: 400px;
    background: #fff;
    margin-right: 20px;
}
.guideContent .right{
    background: #fff;
    flex: 1;
}

上面的意思是左邊400px , 右邊佔據剩餘所有空間

flex: 1的意思是

flex:1 1 auto 的簡寫

第一個引數是1 代表等分剩餘空間

第二個引數是1 代表如果空間不足。專案比例將縮小

第三個引數是auto 代表專案的本來大小

開源作品

讚賞作者

微信交流