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

最新推荐文章于 2024-05-12 10:54:35 发布

Bunny0212

最新推荐文章于 2024-05-12 10:54:35 发布

阅读量434

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46533577/article/details/133812890

版权

前端专栏收录该内容

89 篇文章 0 订阅

订阅专栏

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

css 代码

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

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

如果想要简写，可以这样

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

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

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>