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 容器。
示例：
Item 1
Item 2
Item 3
此时子元素会默认沿水平方向（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 在父容器中水平垂直居中：
居中内容
响应式 Flex 控制
Bulma 支持按断点控制 Flex 行为，适用于不同屏幕尺寸。
- is-flex-mobile：仅在移动设备上启用 flex
- is-flex-tablet：仅在 tablet 及以上生效
- is-flex-desktop-only：仅桌面显示为 flex
例如，在移动端希望元素垂直排列，桌面端水平排列：
