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

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

css 代码

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

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

如果想要简写，可以这样

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

.part {
  flex: 1 0 0; /* 是上述两行的简写形式 */
}
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5