【Vuetify】レスポンシブで配置を変えたいときはtext-{breakpoint}-{value}を使う

[Vue.js + Vuetify + Firebase Project - DevMeetup](https://www.youtube.com/watch?v=at6QjSwKOuA&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt&index=7&t=0s)をやっている際に地味に詰まったのでメモします。

# やりたいこと

「EXPLOR MEETUPS」ボタン(赤)と「ORGANIZE MEETUP」ボタン(青)の配置を、ブラウザ画面の時もスマホ画面の時も中央寄せにしたい。

<img width="1440" alt="スクリーンショット 2020-07-24 10.03.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/2785fdf3-f3a8-1a56-e520-44342c863736.png">
<img width="285" alt="スクリーンショット 2020-07-24 10.03.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/3379364c-3d3d-bc2d-2d66-8bc18741661d.png">



# 何も指定しない

```vue
<template>
  <v-container>
    <v-row>
      <v-col>
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col>
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
```

<img width="1437" alt="スクリーンショット 2020-07-24 9.56.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/8ef60b4b-7a9a-8cad-3ac2-5677f3fc7eaa.png">


「EXPLOR MEETUPS」ボタンを右に寄せたら良さそうだ。

# alignを指定する
https://vuetifyjs.com/en/components/grids/

```vue
<template>
  <v-container>
    <v-row>
      <!-- alignを指定 -->
      <v-col align="right"> 
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col>
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
```

<img width="1433" alt="スクリーンショット 2020-07-24 9.57.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/5d4da30e-776d-09a0-5e61-bfeb2cdcf01b.png">

<img width="293" alt="スクリーンショット 2020-07-24 9.57.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/eda19372-4f19-4e1f-ead5-83d1d650ec76.png">

ブラウザはうまくいったが、スマホが崩れてしまった。


# align, breakpointを指定する
https://vuetifyjs.com/en/customization/breakpoints/

```vue
<template>
  <v-container>
    <v-row>
      <!-- align, breakpointを指定 -->
      <v-col align="$vuetify.breakpoint.xs ? 'center' : 'right'"> 
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col>
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
```

<img width="1430" alt="スクリーンショット 2020-07-24 10.01.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/498da474-be5f-5b40-88ec-adabdb8b8617.png">

そもそも機能しなかった。

# text-{breakpoint}-{value}を指定する

https://vuetifyjs.com/en/styles/text-and-typography/

```vue
<template>
  <v-container>
    <v-row>
      <v-col class="text-center text-sm-right">
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col class="text-center text-sm-left">
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
```

<img width="1440" alt="スクリーンショット 2020-07-24 10.03.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/5c1c44fa-50aa-b780-d29d-c4df8c9418c1.png">

<img width="285" alt="スクリーンショット 2020-07-24 10.03.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/e1df5a52-32fe-84a1-e93b-b853ea6ca9ac.png">

できました。

注意点として、
>These classes can be applied to all breakpoints from xs to xl. When using a base class,.text-{value}, it is inferred to be .text-xs-${value}.

だそうで、``text-xs-center``とすると機能しませんでした。

公式を見たら、いかにも文字の時のみ使う雰囲気が出てたので詰まりました。
他にもっと良い方法があれば教えてください。