<style>
/* 父容器：开启弹性盒子 */
.flex-row {
display: flex; /* 开启 flex */
gap: 20px; /* 两栏间距（可选） */
}
/* 左侧：固定宽度 */
.left {
width: 300px; /* 固定你想要的宽度 */
flex-shrink: 0; /* 禁止缩小（必须写！） */
background: #fff;
}
/* 右侧：自动占满剩余空间 */
.right {
flex: 1; /* 核心：自适应剩余宽度 */
background: #fff;
}
</style>
<!-- HTML 结构 -->
<div class="flex-row">
<div class="left">左侧固定 300px</div>
<div class="right">右侧自适应</div>
</div>左图右文 弹性布局
利用弹性盒子，左侧固定宽度，右侧自适应的两列布局。在实现自适应两列布局中，在父盒子中DISPLAY:FLEX后，可以直接利用FLEX:1属性自适应剩余宽度。
