Q&A
ご回答ありがとうございます。
すみません、今回はグリッドの合計が12状態（md8とmd4）で余白を開けたかったので、こちらでは余白が出来ませんでした。
12に満たない状態だと確かに開きましたので、こちらも必要な時に使用したいと思います。
Vuetifyを使ってレスポンシブデザインのWebページを作成しています。
すごく基礎的なことかもしれませんが教えてください。
領域Aと領域Bがあります。
ブラウザの横幅が広い時はAとBを横並びにし、その間だけに余白を開けたい（Aの左端とBの右端は親領域の端ぴったりにしたい）です。
ブラウザの横幅が狭い時はAとBを縦並びにし、それぞれの左右端は余白無し（親領域の端ぴったり）にしたいです。
HTML
1<v-container> 2<v-layout wrap row> 3 <v-flex xs12 md8> 4 領域A 5 </v-flex> 6 <v-flex xs12 md4> 7 領域B 8 </v-flex> 9</v-layout> 10</v-container>
例えばこれで「横並び・縦並びの切り替え」は出来ますが、横並び時に間の余白が出来ません。
<v-flex xs12 md8 mr-3>などとすると余白は出来ますが、縦並び時でも余白が発生し、端が親領域の端に合いません。
今時の開発事情が分かっていないので、「子領域のmargin設定でどうにかするもの」「自力で追加実装するもの」などのセオリーだけでも教えて頂けると幸いです。
（一応CSSのonly-childやnot(:only-child)などを駆使すれば実現可能であるとは分かっているのですが、フレームワークを使っているのにわざわざ自分で実装するの？ 何かスマートな方法があるのでは？ という思いから質問させて頂きました）
回答2件
0
自己解決
grid-list-〇〇というコンポーネントがあり、こちらを使うことで実現出来ました。
Grid list component — Vuetify.js
きちんとリサーチしておらず申し訳ありません。
投稿2019/08/06 02:11
総合スコア11429
0
方法 1. justify-space-between
justify-space-between を追記するだけです。
ここに公式ドキュメントの playground があります。
justify-space-between と Row and column breakpoints を使います。
方法 2. Row and column breakpoints
column の on/off で切り替えます。
公式ドキュメントのここを主に改変して作りました。
動画
Vuetify は最近、最新版のバージョンが２に上がり１と少し仕様が変わりました。以下の動画は１系の動画ですがわかりやすかったです。
投稿2019/08/05 12:52
編集2019/08/05 15:26
総合スコア830
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。