使用 flex 弹性盒保持容器均分布局

Bunny02122023-10-13 16:52

使用 flex 弹性盒保持容器均分布局

css 代码

css 复制代码

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.part {
  flex-grow: 1; /* 设置这个值就可以实现均匀分布，但是里面有内容会自动撑开 */
  flex-basis: 0; /* 为了防止自动撑开，设置基础值为 0 */
}

如果想要简写，可以这样

css 复制代码

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.part {
  flex: 1 0 0; /* 是上述两行的简写形式 */
}

HTML 结构

html 复制代码

<div class="container">
  <div class="part" style="background-color: #e8685c"></div>
  <div class="part" style="background-color: #f3be50"></div>
  <div class="part" style="background-color: #61c354"></div>
</div>