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）排列。

控制主轴方向：行与列

通过添加方向类，可以改变主轴的排列方向。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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">
这样在手机上自动变为列布局，其他设备保持默认行布局。

基本上就这些常用类。Bulma 的 Flex 命名直观，语义清晰，配合其网格系统和间距工具，能快速搭建现代布局，无需写一行自定义 CSS。不复杂但容易忽略细节，建议结合浏览器开发者工具实时调试效果。