# Spacing

新しいクラスを作成せずにレイアウトを更新します。 スペーシングヘルパーは、要素のパディングやマージンを変更するのに便利です。

プレイグラウンドを使って、さまざまなヘルパークラスで何ができるのかを実感してください。 ヘルパークラスがどのように機能するかについての説明は、以下の「どのように機能するか」のセクションを参照してください。

# どのように機能するか

ヘルパークラスは 0から16 までの範囲の要素に margin または _padding_を適用します。 各サイズ増分は、一般的なMaterial Designの間隔に合わせて設計されています。 これらのクラスは、 {property}{direction}-{size} 形式で適用できます。

property には以下の間隔のタイプが適用されます:

  • m - margin を適用する
  • p - padding を適用する

direction は、プロパティが適用される側を指定します:

  • t - margin-topおよびpadding-topの間隔を適用します。
  • b - margin-bottompadding-bottom の間隔を適用します。
  • l - margin-leftpadding-left の間隔を適用します。
  • r - margin-rightpadding-right の間隔を適用します。
  • s - applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)
  • e - applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)
  • x - *-left*-right の間隔を適用します。
  • y - *-top*-bottom の間隔を適用します。
  • a - プロパティの間隔を、天地左右すべての方向に適用します。

size は 4px の間隔でプロパティの増分を制御します:

  • 0 - eliminates all margin or padding by setting it to 0
  • 1 - sets margin or padding to 4px
  • 2 - sets margin or padding to 8px
  • 3 - sets margin or padding to 12px
  • 4 - sets margin or padding to 16px
  • 5 - sets margin or padding to 20px
  • 6 - sets margin or padding to 24px
  • 7 - sets margin or padding to 28px
  • 8 - sets margin or padding to 32px
  • 9 - sets margin or padding to 36px
  • 10 - sets margin or padding to 40px
  • 11 - sets margin or padding to 44px
  • 12 - sets margin or padding to 48px
  • 13 - sets margin or padding to 52px
  • 14 - sets margin or padding to 56px
  • 15 - sets margin or padding to 60px
  • 16 - sets margin or padding to 64px
  • n1 - sets margin to -4px
  • n2 - sets margin to -8px
  • n3 - sets margin to -12px
  • n4 - sets margin to -16px
  • n5 - sets margin to -20px
  • n6 - sets margin to -24px
  • n7 - sets margin to -28px
  • n8 - sets margin to -32px
  • n9 - sets margin to -36px
  • n10 - sets margin to -40px
  • n11 - sets margin to -44px
  • n12 - sets margin to -48px
  • n13 - sets margin to -52px
  • n14 - sets margin to -56px
  • n15 - sets margin to -60px
  • n16 - sets margin to -64px
  • auto - 間隔を auto に設定

# サンプル

# ブレークポイント

Vuetifyは、 Flexboxを使用する12ポイントのグリッドシステムを備えています。 Spacing は、アプリケーションのコンテンツ内に特定のレイアウトを作成するために使用されます。 特定の画面サイズまたは向きをターゲットにするために使用される5つのメディアブレークポイント(xs, sm, md, lg, xl)で構成されています。 デフォルトの解像度は Viewport Breakpoints テーブルで以下に定義されており、 breakpoint service configをカスタマイズすることで変更できます。

Material Designブレークポイント
デバイスコード種類解像度の範囲
Extra smallxs小型から大型のスマホ< 600px
Smallsm小型から中型のタブレット600px > < 960px
Mediummd大型タブレットからノートパソコン960px > < 1264px*
Largelgデスクトップ1264px > < 1904px*
Extra largexl4k、ウルトラワイド> 1904px*
デスクトップにおけるブラウザスクロールバーの * -16px
仕様

ヘルパークラスは特定のブレークポイントに margin または padding を適用します。 これらのクラスは次の形式で適用できます: {property}{direction}-{breakpoint}-{size}. これは、推測される xs には適用されません。 例えば ma-xs-2ma-2 と同じです。

# Horizontal

marginヘルパークラスを使えば、コンテンツを簡単に水平方向にセンタリングすることができます。

# ネガティブ・マージン

マージンは、ネガティブ側にも同様に 1 から 16 の間隔で適用できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/17/2021, 9:17:47 AM