bulma通过内置flex类实现响应式布局，使用is-flex创建弹性容器，结合is-flex-direction控制排列方向，is-justify-content和is-align-items设置对齐方式，并支持移动端适配，如is-flex-direction-column-mobile，可快速构建无需自定义css的现代页面结构。
Bulma 是一个基于 Flexbox 的现代 CSS 框架，它原生支持弹性布局，无需额外编写 CSS 代码即可快速构建响应式页面结构。通过使用 Bulma 提供的内置 Flex 类，你可以轻松控制容器和子元素的排列方式、对齐方式和响应行为。
使用 is-flex 启用 Flex 容器
在任意块级元素上添加 is-flex 类，即可将其转换为 Flex 容器。
示例：
<div class="is-flex"><br> <div>Item 1</div><br> <div>Item 2</div><br> <div>Item 3</div><br> </div>
此时子元素会默认沿水平方向（row）排列。
控制主轴方向：行与列
通过添加方向类，可以改变主轴的排列方向。
立即学习“前端免费学习笔记（深入）”；
- flex-direction: row → 使用 is-flex-direction-row（默认）
- flex-direction: column → 使用 is-flex-direction-column
- row-reverse 和 column-reverse 也支持，如 is-flex-direction-row-reverse
需要垂直堆叠导航项或表单字段时，使用 is-flex-direction-column 更直观。
设置对齐方式：主轴与交叉轴
Bulma 提供多个类来控制子元素在主轴和交叉轴上的对齐。
- is-justify-content-center：主轴居中对齐
- is-justify-content-space-between：两端对齐，中间间距相等
- is-align-items-center：交叉轴居中（常用于垂直居中）
- is-align-content-stretch：多行内容拉伸填充
让一个 div 在父容器中水平垂直居中：
<div class="is-flex is-justify-content-center is-align-items-center" style="height: 200px;"><br> <p>居中内容</p><br> </div>
响应式 Flex 控制
Bulma 支持按断点控制 Flex 行为，适用于不同屏幕尺寸。
- is-flex-mobile：仅在移动设备上启用 flex
- is-flex-tablet：仅在 tablet 及以上生效
- is-flex-desktop-only：仅桌面显示为 flex
例如，在移动端希望元素垂直排列，桌面端水平排列：<div class="is-flex is-flex-direction-column-mobile">
<br>
这样在手机上自动变为列布局，其他设备保持默认行布局。
<p>基本上就这些常用类。Bulma 的 Flex 命名直观，语义清晰，配合其网格系统和间距<a style="color:#f60; text-decoration:underline;" title="工具" href="https://www.php.cn/zt/16887.html" target="_blank">工具</a>，能快速搭建现代布局，无需写一行自定义 CSS。不复杂但容易忽略细节，建议结合<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>开发者工具实时调试效果。</p>
</div>
