Flex布局子元素过紧主因是flex-basis默认auto且缺min-width和padding；应设合理flex-basis（如200px或0）、min-width、padding及box-sizing，并按需调整flex-shrink为0防压缩，响应式下用媒体查询动态调节。
Flex布局中子元素内容太紧，通常是因为
默认为
（即按内容宽度/高度收缩），又没设置最小尺寸或内边距，导致文字、图标等“挤在一起”。解决核心是合理控制初始主轴尺寸，并配合
和
等协同作用。
明确 flex-basis 的作用：不是固定宽高，而是“初始主轴尺寸”
决定子元素在分配剩余空间前的基准大小。它不等于
或
，但会直接影响 flex 项的起始占位：
设为
→ 该项初始宽度为200px（主轴为水平时）
设为
（等价于
）→ 按内容撑开，易过窄
设为
→ 忽略内容尺寸，完全由
按比例分配剩余空间，适合均分场景
常用组合：flex-basis + min-width + padding
仅靠
还不够，需搭配基础防护措施防止过度压缩：
给子元素加
（根据实际内容定，如按钮至少100px，卡片至少240px）
添加
提供呼吸感，避免文字贴边
用
确保 padding 不撑大总尺寸
示例写法：
警惕 flex-shrink 默认为1：内容可能被强行压缩
即使设置了
，若容器宽度不足，且
（默认值），子项仍会被缩小。可按需调整：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
禁止压缩：
（配合
更稳妥）
允许适度压缩但保底：
（grow=1, shrink=0, basis=200px）
对关键内容项（如带图标的按钮、带头像的用户栏）优先设
响应式场景：用媒体查询动态调整 flex-basis
小屏下固定
可能导致换行或溢出，建议配合断点优化：
桌面端：多个子项并排，
或
平板
端：改用
，每行最多2个
手机端：设为
，垂直堆叠，或直接
flex-basisautoflex-shrinkmin-widthflex-basiswidthheightflex-basis: 200pxflex-basis: contentautoflex-basis: 0flex-growflex-basismin-width: 120pxpadding: 8px 16pxbox-sizing: border-box.item { flex: 1 1 200px; min-width: 160px; padding: 10px; box-sizing: border-box; }flex-basis: 200pxflex-shrink: 1flex-shrink: 0min-widthflex: 1 0 200pxshrink: 0flex-basisflex-basis: 25%240pxflex-basis: 50%flex-basis: 100%flex-direction: column