使用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自适应宽度显示省略号