怎么用Bulma的is-flex类快速搭出响应式行内布局
Bulma 的 Flex 布局不靠自定义 CSS，全靠预设的工具类组合。核心是 is-flex（开启 flex 容器）配合 is-flex-direction-row/column、is-justify-content-center 等控制轴向和对齐。它默认不设 flex-wrap，所以子项超宽会溢出——这是最常踩的坑。
常见错误现象：is-flex 加了但子元素还是竖排堆叠，或在小屏上挤成一团看不见。
- 必须给父容器加
is-flex，子元素不用额外设 display - 移动端优先？直接加
is-flex-mobile替代is-flex，它只在max-width: 769px下生效 - 想让子项自动换行？补上
is-flex-wrap-wrap；需要等宽撑满？子项加is-flex-grow-1 - 注意 Bulma v0.9+ 把
is-flex-direction-row-reverse这类类名统一为is-flex-direction-reverse-row，旧项目升级容易漏改
Bulma 的 columns 和 is-flex 到底该选哪个
columns 是 Bulma 专为栅格设计的语义化结构，带固定 gutters（is-gapless 可关）、自动等宽（is-one-quarter 等）、隐式 flex-wrap；而 is-flex 更底层，适合非栅格场景，比如按钮组、表单控件对齐、卡片头部操作区。
使用场景差异明显：columns 适合「内容区块横向分栏」，is-flex 适合「组件内部微布局」。
立即学习“前端免费学习笔记（深入）”；
-
columns在 Safari 旧版中可能因min-width: 0缺失导致文字溢出，需手动加is-flex-shrink-0到子column -
columns默认不响应式，要写is-desktop或is-tablet才能控制断点，不如is-flex-mobile直观 - 混用风险：在
columns内部再套is-flex没问题，但别把columns当 flex 容器去调justify-content—— 它的对齐靠is-centered这类修饰类
为什么 is-flex 子元素的 margin 在移动端突然失效
Bulma 对移动端做了 margin 重置：所有 is-flex-mobile 容器下的子元素，margin 会被 @media screen and (max-width: 768px) 规则强制设为 0，除非显式加 is-marginless-mobile 或用 is-m-2-mobile 这类间距工具类。
这不是 bug，是 Bulma 认为移动设备上留白应由布局类统一控制，而非依赖原始 margin。
- 调试时看到 margin 消失，先检查父容器是否用了
is-flex-mobile或响应式类 - 想保留某子项的 margin？加
is-m-3-mobile（m=margin，3=尺寸等级）比写style="margin: 1rem"更可靠 - 注意
is-flex-mobile不影响 padding，padding 工具类（如is-p-4）在移动端依然生效
如何避免 Bulma Flex 类与自定义 CSS 冲突
Bulma 的 Flex 工具类都是 !important 声明，优先级极高。如果你写了 .my-card { display: inline-flex; }，再加 is-flex 就会覆盖成 display: flex !important，破坏原有行为。
真正容易被忽略的是：Bulma 的 is-flex 系列类没有提供 inline-flex 变体。需要 inline 行为时，只能自己写类或用 is-inline-flex（v0.9.4+ 新增，但低版本不支持）。
- 兼容老版本？建一个轻量自定义类：
.is-inline-flex { display: inline-flex !important; } - 避免全局污染：只在必要组件作用域里 import 自定义类，别塞进 main.css 顶层
- 性能提示：Bulma 的 Flex 类全部是原子类，打包后体积可控；但若大量用
is-flex-direction-column-tablet这类组合类，CSS 文件会略增
Flex 布局的复杂点不在语法，而在 Bulma 把“响应式断点”“间距重置”“显示模式切换”全耦合进了类名体系里——你得记住哪一层类负责哪件事，不然改个 margin 可能牵出三处响应式异常。
