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

使用 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>
相关推荐
ai小鬼头几秒前
AIStarter:一键部署AI工具,轻松提升效率的秘密武器!
css·人工智能·github
风铃喵游1 分钟前
小程序软装: 组件库开发
前端·架构
摆烂为不摆烂1 分钟前
深入JS(一): 数据类型与检测方法原理
前端
无羡仙1 分钟前
深入理解 React Router
前端
前端的日常1 分钟前
在虚拟列表中,如果子元素的高度不固定,我们需要怎么实现?
前端
江城开朗的豌豆7 分钟前
Vue路由钩子全攻略:让你的页面跳转更丝滑!
前端·javascript·vue.js
江城开朗的豌豆10 分钟前
Vue的data去哪儿了?生命周期寻宝记
前端·javascript·vue.js
玲小珑23 分钟前
Next.js 教程系列(十三)Server Actions:新一代全栈能力
前端·next.js
toooooop824 分钟前
elementUI vue2 前端表格table数据导出(二)
前端
山河木马42 分钟前
前端学习C++之:创建对象
前端·javascript·c++