CSS篇:Flex布局核心属性详解:flex-grow/shrink/basis到底怎么用?

🎓 作者简介前端领域优质创作者

🚪 资源导航: 传送门=>

🎬 个人主页: 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: YANG_TAO_WEB@163.com 📩

💬 个人微信: y_t_t_t_ 📱

📌 座 右 铭: 生活就像心电图,一帆风顺就证明你挂了 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

一、为什么我们需要理解flex的三个参数?

在Flex布局中,flex这个简写属性看似简单,却让不少开发者感到困惑。flex: 1flex: 0 1 autoflex: 0 0 200px这些写法到底有什么区别?理解这三个参数的含义,能让我们真正掌握Flex布局的精髓,实现各种复杂的伸缩布局效果。

二、flex属性的三种写法

1. 单值写法

css 复制代码
.item {
  flex: 1; /* 等价于 flex: 1 1 0 */
}

2. 双值写法

css 复制代码
.item {
  flex: 1 0; /* 等价于 flex: 1 0 0 */
}

3. 三值写法(完整形式)

css 复制代码
.item {
  flex: 0 1 100px; /* flex-grow | flex-shrink | flex-basis */
}

三、三个核心参数详解

1. flex-grow(扩展比例)

定义 :当容器有剩余空间时,项目的放大比例
特点

  • 默认值为0(不放大)
  • 接受无单位数值
  • 按比例分配剩余空间
css 复制代码
/* 示例:三个项目按2:1:1的比例分配剩余空间 */
.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }
.item3 { flex-grow: 1; }

2. flex-shrink(收缩比例)

定义 :当空间不足时,项目的缩小比例
特点

  • 默认值为1(允许缩小)
  • 0表示不缩小
  • 按比例收缩(数值越大收缩越多)
css 复制代码
/* 示例:第一个项目不缩小,其他项目正常缩小 */
.item1 { flex-shrink: 0; }
.item2, .item3 { flex-shrink: 1; }

3. flex-basis(基准大小)

定义 :项目在分配多余空间之前的初始大小
特点

  • 默认值为auto(项目本来的大小)
  • 可以设置具体长度(px/%等)
  • 设为0时,空间分配更可控
css 复制代码
/* 示例:项目初始宽度为200px */
.item { flex-basis: 200px; }

四、典型场景解析

场景1:固定宽度+自适应布局

css 复制代码
.sidebar {
  flex: 0 0 250px; /* 不放大不缩小,固定250px */
}
.content {
  flex: 1; /* 自动填充剩余空间 */
}

场景2:等分剩余空间

css 复制代码
.items {
  flex: 1; /* 所有项目等分空间 */
}

场景3:比例分配空间

css 复制代码
.item1 { flex: 2; } /* 占2份 */
.item2 { flex: 1; } /* 占1份 */
.item3 { flex: 1; } /* 占1份 */

场景4:防止内容挤压

css 复制代码
.item {
  flex: 0 1 auto; /* 可以缩小但不放大,保持内容宽度 */
}

五、常见问题解答

Q1:flex: 1和flex: auto有什么区别?

  • flex: 1flex: 1 1 0(从0基准开始分配)
  • flex: autoflex: 1 1 auto(从内容宽度开始分配)

Q2:为什么flex-basis设为0有时更好?

设为0可以消除项目本身大小的影响,使空间分配完全由flex-grow控制

Q3:flex-shrink设置为0会有什么影响?

项目将不会缩小,可能导致溢出容器

六、实用技巧

  1. 响应式布局

    css 复制代码
    @media (max-width: 768px) {
      .item { flex: 0 0 100%; }
    }
  2. 内容保护

    css 复制代码
    .item {
      flex: 0 1 auto;
      min-width: 0; /* 防止文本溢出 */
    }
  3. 表单布局优化

    css 复制代码
    .form-item {
      flex: 1 1 200px; /* 最小200px,可以伸缩 */
    }

七、总结

理解flex属性的三个参数,是掌握Flex布局的关键:

  1. flex-grow:控制"多吃"剩余空间的能力
  2. flex-shrink:控制"挨饿"时的忍耐度
  3. flex-basis:决定初始"体型"大小

记住这个比喻:把Flex容器比作一个可伸缩的盒子,项目就像里面的弹簧:

  • flex-grow决定弹簧能拉多长
  • flex-shrink决定弹簧能压多短
  • flex-basis是弹簧的自然长度

你在项目中用过哪些巧妙的flex参数组合?欢迎在评论区分享你的经验!

相关推荐
前端 贾公子2 小时前
pnpm 的 resolution-mode 配置 ( pnpm 的版本解析)
前端
伍哥的传说2 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
gadiaola3 小时前
【SSM面试篇】Spring、SpringMVC、SpringBoot、Mybatis高频八股汇总
java·spring boot·spring·面试·mybatis
麦兜*4 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑4 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室5 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~5 小时前
重学前端004 --- html 表单
前端·html
遇到困难睡大觉哈哈5 小时前
CSS中的Element语法
前端·css
Real_man5 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中5 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts