Bulma如何快速实现Flex布局

Bulma作为一款原生基于Flexbox的现代CSS框架，通过语义清晰、命名直观的内置Flex类（如is-flex、is-flex-direction-column、is-justify-content-center、is-align-items-center等），让用户无需编写任何自定义CSS即可快速构建响应式、跨设备适配的弹性布局——无论是水平排列导航栏、垂直堆叠表单字段，还是实现精准的水平垂直居中，甚至针对移动端自动切换行列方向，Bulma都能以极简的HTML类名高效完成，极大提升开发效率与代码可维护性。

Bulma 是一个基于 Flexbox 的现代 CSS 框架，它原生支持弹性布局，无需额外编写 CSS 代码即可快速构建响应式页面结构。通过使用 Bulma 提供的内置 Flex 类，你可以轻松控制容器和子元素的排列方式、对齐方式和响应行为。

使用 is-flex 启用 Flex 容器

在任意块级元素上添加 is-flex 类，即可将其转换为 Flex 容器。

示例：

此时子元素会默认沿水平方向（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

例如，在移动端希望元素垂直排列，桌面端水平排列：