使用flex布局实现3个div并排，两侧的div宽度固定，中间的div自适应面试官问过，当时不知道，今天工作中遇到了。
要使用Flex布局实现3个div并排，两侧div宽度固定，中间div自适应，可以给包含div的父容器设置display: flex，然后给两侧的div设置固定宽度，中间的div则会自动填充剩余空间。
以下是实现这种布局的示例代码：
HTML:
<div class="container">
<div class="side">左侧固定宽度</div>
<div class="middle">中间自适应区域</div>
<div class="side">右侧固定宽度</div>
</div>CSS:
.container {
display: flex;
}
.side {
width: 200px; /* 或者你想要的固定宽度 */
background-color: #f9f9f9; /* 仅为了视觉效果 */
}
.middle {
flex-grow: 1; /* 中间div自适应 */
background-color: #ddd; /* 仅为了视觉效果 */
}这段代码会创建一个包含三个div的容器，两侧的div宽度固定，中间div自动填充剩余空间。
评论已关闭