Div 안의 요소 세로정렬하기

문제

가로로 되어있는 버튼

<div class="flex q-gutter-xs">
    <q-btn :loading="progress" color="primary" @click="progress = true">
      Controlled from outside
      <template v-slot:loading>
        <q-spinner-radio class="on-left" />
        Click "Stop" Button
      </template>
    </q-btn>
    <q-btn
      :disable="!progress"
      color="negative"
      @click="progress = false"
      label="Stop"
    />

    <q-btn
      align="between"
      class="btn-fixed-width"
      color="accent"
      label="Align between"
    />
    <q-btn
      align="around"
      class="btn-fixed-width"
      color="brown-5"
      label="Align around"
      icon="lightbulb_outline"
    />
  </div>

하나의 div 안에 들어가있는 4개의 버튼

해결

display 와 flex-direction 속성을 변경하여 해결

<style lang="scss" scoped>
.q-gutter-xs {
  display: flex;
  flex-direction: column;
}
</style>