如何让Vue3 Quasar水平卡片的操作区固定居右显示

因为q-card-section horizontal本质是flex布局，要让操作区始终固定在最右侧且不被左侧文本挤压，只需给左侧文本容器添加Quasar内置的flex-grow-1类，让左侧区域占据容器的剩余空间，操作区就会被自动推到最右侧。

修改后的完整代码：

<div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card" flat bordered>
      <q-card-section horizontal>
        <div class="flex-grow-1">Title</div>

        <q-card-actions vertical align="right" class="justify-around q-px-md">
          <q-btn flat round color="red" icon="favorite"></q-btn>
          <q-btn flat round color="accent" icon="bookmark"></q-btn>
          <q-btn flat round color="primary" icon="share"></q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </div>

如果左侧文本内容过长，可额外添加text-ellipsis overflow-hidden类处理文本溢出，避免撑大容器：

<div class="flex-grow-1 text-ellipsis overflow-hidden">这里是较长的标题文本，测试溢出省略效果</div>

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