使用flex布局實現寬度自適應

本文轉載自查看原文 2019-09-24 21:47 8502

1.兩側固定，中間自適應

.box{

width: 100%;

display: flex;

height: 300px;

}

.left{

width: 100px;

height: 200px;

background-color:red;

}

.right{

width: 100px;

height: 200px;

background-color:red;

}

.center{

flex: 1;

height: 300px;

background-color: lime;

}

<body>

</div>

2.左側固定，右側自適應

.box{
    width: 100%;
    display: flex;
    height: 300px;
}
.left{
    width: 100px;
    height: 200px;
    background-color:red;
}
.right{
    flex: 1;
    height: 300px;
    background-color:lime;
}



<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flex 布局 input 寬度不自適應 flex左側固定寬度，右側自適應布局 flex布局一側固定寬度一側自適應 flex布局制作自適應網頁 flex布局嵌套之高度自適應 BFC之寬度自適應布局篇 rem是如何實現自適應布局的？ Devexpress實現自適應布局 rem是如何實現自適應布局的？ flex自適應寬度顯示省略號