如何将网页屏幕水平分割为3个相等的部分？

<div class="container">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

.container {
  display: flex;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.section {
  flex: 1; /* 设置每个部分的弹性比例为1，即平均分配剩余空间 */
  border: 1px solid #000; /* 可选：添加边框样式 */
}