v-flex の使い方

※分からない部分はこうだと思って書き進めていって、間違ってたら戻ってくる

基本構成

<v-container>

        <v-layout>

            <v-flex>

            </v-flex>

        </v-layout>

</v-container>

• v-container / v-layout は、親要素
• Flexbox で言うところの、display: flex を書く対象
• v-container は、コンテナに対して padding がきいている
• v-layout は padding なし
• よく使う要素が v-container / v-layout によって違うので、基本両方ちゃんと書く
• v-flex が、子要素
• さらに細かい階層までいくときは、v-flex をかます
• v-container -> v-layout -> v-flex -> v-container -> v-layout -> v-flex -> …

よく使うプロパティ

v-container のみ

• grid-list-{xs through xl} : 子要素同士に対してガターをきかせる
  
• fluid : 画面横幅いっぱい使う

※ {xs through xl} は bootstrap でいうところのそれとは関係なく、単にガター幅を意味する

v-container / v-layout

• d-flex / d-inline-flex : デフォルトは d-flex と同じ動き
• justify : 横向きの寄せ方 ( <- row の場合 )
  
• align : 縦向きの寄せ方 ( <- 同上 )

※ d-flex は、右端を行の終わりまで引き伸ばす

※ fill-height もあるが、<style></style>に height: 100% とする方が分かりやすい

v-layout

• wrap : デフォルトは false になっている
  
• row / column : デフォルトは row になっている

v-flex

• {xs | sm | md | lg | xl} (1-12) : 要素の大きさ
• shrink / grow : 縮ませるか引き伸ばすか
• offset / order : 余白と並び順
  

※ v-flex の折り返しは「適宜」なので、折り返す必要の無い幅なら折り返さない

※ Vuetify のブレークポイントは、Bootstrap と微妙に違う

( 参考記事 )