自适应布局问题

Youky ... 2023-5-9

CSS

Less than 1 minute

# 自适应布局问题

# 两列自适应布局（左侧固定宽度，右侧自适应占满剩余空间）

描述：左侧固定宽度（比如 100px），右侧占满剩余宽度

左侧元素设置固定 width 和浮动
右侧触发 BFC

<div style="height: 100px;width: 100px;float: left;">左侧固定元素</div>
<div style="height: 200px;overflow:hidden;background-color:#777">
  右侧自适应元素
</div>

1
2
3
4

# 三列自适应布局（左右固定宽度，中间自适应），且中间元素要最先加载（标签写在前面）

用order属性控制元素的顺序
用flex-grow:1实现中间元素的自适应宽度

<style>
  div {
    height: 200px;
  }
  #container {
    display: flex;
    width: 100vw;
  }
  .left {
    order: 1;
    width: 100px;
  }
  .middle {
    order: 2;
    flex-grow: 1;
  }
  .right {
    order: 3;
    width: 100px;
  }
</style>
<body>
  <div id="container">
    <div class="middle">2</div>
    <div class="left">1</div>
    <div class="right">3</div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28