saber酱的抱枕

Fly me to the moon

03/12
06:56
学习

flex 布局一列固定宽度一列自适应

占据剩余空间
固定

如上面的示例,左右两侧都可以输入文字,它们的宽度也可以改变,但始终保持在一行内,这算是两列自适应吧。如果给右侧设置个固定宽度,那么就是一列固定一列自适应了。

<style>
  .wrap {
    display: flex;
    flex-direction: row;  /* 左右排列 */
  }
  .wrap .a {
    flex: 1; /* 默认占满,如果空间不足,该项目将缩小 */
  }
</style>
<div class="wrap">
  <div class="a">占据剩余空间</div>
  <div class="b">固定</div>
</div>

flex 布局一列固定宽度一列自适应