【Vuetify】``v-container``, ``v-layout``, ``v-flex``の使い分けが分かりません

Question

お疲れ様です。Vuetifyを最近使い始めたのですが、レイアウトに関する三つのタグの使い分けがイマイチ理解できません。自分なりにまとめてみたのですが、現場で使われている方々はどのように使い分けていらっしゃるのでしょうか？？？

質問したいこと

v-container, v-layout, v-flexの使い分けが分かりません。どんな目的に合わせて使っているのでしょうか？
（例えばカンバン的な画面を作るときこんな風に入れ子にして作るよ、みたいな具体例があるとなお嬉しいです！！）

調べたところと自分なりの答え

v-container, v-layoutについて

vuetifyの公式を読み、v-container, v-layoutの特徴を下記の通り整理しました。

1. v-container, v-layoutはflexboxのコンテナ的な動きをする
2. v-containerはpaddingがかかる
3. v-containerはgrid-list{xs through xl}が使える
4. v-layoutはflex-flowに当たる指定が可能

v-flexについて

こちらも公式などを読み、下記の通り特徴をまとめました。

1. flexboxのアイテム的な使い方ができる
2. {size}{1-12}でアイテムの幅を指定できる

以上により、例えばカンバン的な画面を作りたいなら（v-cardを織り交ぜつつ）、
v-container> v-layout> v-flex>v-card> v-container> v-layout> v-flex> v-card...
というループにしてつくることになるのかと思うのですが、若干冗長な気もしてしまいます。

蛇足: 指定できるプロパティについて

以降蛇足ですが、考える中で v-container, v-layoutに指定できるプロパティを下記の通り整理したので貼っておきます。

		v-container	v-layout
align-content	start;	○	○
	end;	○	○
	center;	○	○
	space-between;	○	○
	space-around;	○	○
align-items	baseline;	○	○
	center;	○	○
	start;	○	○
	end;	○	○
flex-direction	row;	×	○
	row-reverse;	×	reverseとの合わせ技
	column;	×	○
	column-reverse;	×	reverseとの合わせ技
flex-wrap	nowrap;	×	wrapがある
	wrap;	×	wrapがある
	wrap-reverse;	×	wrap, reverseとの合わせ技？
justify-content	start;	○	○
	center;	○	○
	space-between;	○	○
	space-around;	○	○
	space-evenly;	○	○
その他(vuetifyオリジナル？)	d-{type}	○	○
	fill-height	○	○
	fluid	○	×
	grid-list-{xs through xl}	○	×
	id	○	○
	tag	○	○

v-flexの指定できるプロパティは下記の通りでした。

		v-flex
align-self	baseline;	○
	center;	○
	start;	○
	end;	○
その他	grow	○
	shrink	○
	(size)(1-12)	○
	id	○
	offset-(size)(0-12)	○
	order-(size)(1-12)	○
	tag	○

Answer 1

使い方に関しては公式サイトに記載されています。

https://vuetifyjs.com/ja/framework/grid

Usage

The v-container can be used for a center focused page, or given the fluid prop to extend its full width. v-layout is used for separating sections and contains the v-flex. The structure of your layout will be as follows, v-container » v-layout » v-flex. Each part of the grid chain is a flex-box element. The final, v-flex, automatically sets its children to have flex: 1 1 auto.

For convenience reasons, these components automatically transform attributes into classes. Allowing you to write <v-layout pa-3 mb-2></v-layout> instead of <v-layout class="pa-3 mb-2"></v-layout>. The only exception are data attributes which are left as-is.

Comments

[退会済みユーザー]

回答ありがとうございます！
以前公式を読んだときはよくわかんねえなあと思ったんですが、今読み直したらなんとなく意味がつかめたように思えます。下記のような理解でよいでしょうか？

v-container: コンテンツ全体を中央寄せ or 画面いっぱいに表示するかの指定に使われる。
v-layout: コンテンツ全体の中のかたまりを表現するために使われて、v-flexを含む。（そのため、ページはv-container » v-layout » v-flexという順に作られる）
v-flex: flexboxのアイテム

また、v-layoutの説明にある「The structure of your layout will be as follows, v-container » v-layout » v-flex」について、これは入れ子を作るときに「v-container » v-layout » v-flex」を繰り返すという意味でしょうか？ 例えば「v-container » v-layout » v-flex » v-layout » v-flex」というような入れ子だと不都合があったりするのでしょうか？