Quasar Framework 0.15 Flex类无效果问题咨询

我之前也碰到过Quasar 0.15版本里Flex布局类失效的情况，结合你的代码来看，主要是布局结构不完整和类的使用逻辑不对导致的，给你几个具体的修复方案：

1. 补全页面核心布局结构 #

Quasar 0.15的页面必须在q-layout和q-page-container的包裹下，才能正确继承布局样式。你的代码缺少了这一层上下文，导致q-page的flex类无法正常发挥作用。修复后的基础结构应该是：

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex">
        <!-- 你的内容区域 -->
      </q-page>
    </q-page-container>
  </q-layout>
</template>

2. 调整Flex类的使用逻辑 #

你代码里row类的div没占满宽度、justify-center不生效，核心原因有两个：

• row的父容器（q-page）需要明确设置宽度为100%，可以用Quasar自带的full-width类快速实现；
• justify-center是flex容器的属性，你需要给col-sm-6的div加上flex类，把它变成flex容器，才能让内部的按钮组居中。

修改后的完整代码如下：

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex full-width">
        <div class="row full-width">
          <div class="col-sm-6 flex justify-center">
            <q-btn-group>
              <q-btn label="1" />
              <q-btn label="2" />
              <q-btn label="3" />
            </q-btn-group>
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

3. 确认主题样式配置 #

因为你是全新安装的web/material主题，检查下quasar.conf.js里的框架配置，确保framework: { cssAddon: true }（如果需要额外CSS工具类）。不过默认情况下，material主题已经包含基础Flex类，这一步大概率没问题，但可以作为兜底检查项。

为什么会出现这个问题？ #

Quasar 0.15的布局系统高度依赖q-layout提供的上下文环境，没有这个容器，页面元素无法正确继承布局的宽度和Flex属性。另外，justify-center这类对齐类只有作用在flex容器上才会生效，所以必须给包含按钮组的col-sm-6div加上flex类，让它成为flex容器才能实现居中。

内容的提问来源于stack exchange，提问作者Pavarine