# Grid system

Vuetifyは、 flex-boxを使用する12ポイントのグリッドシステムを備えています。 グリッドは、アプリケーションのコンテンツ内に特定のレイアウトを作成するために使用されます。 特定の画面サイズや向きをターゲットにするために使用される5種類のメディアブレークポイントxssmmdlgxlが含まれています。 これらの解像度は、Viewport Breakpoints テーブル内で以下に定義され、 ブレークポイントサービス をカスタマイズして変更することができます。

Material Designブレークポイント
デバイスコード (code タグ)TypeRange
Extra smallxs小型から大型のスマホ< 600px
Smallsm小型から中型のタブレット600px > < 960px
Mediummd大型タブレットからノートパソコン960px > < 1264px*
LargelgDesktop1264px > < 1904px*
Extra largexl4kとウルトラワイド> 1904px*
デスクトップにおけるブラウザスクロールバーの * -16px
仕様

# 使い方

Vuetifyグリッドは、 Bootstrap gridから大きく影響を受けています。 グリッドシステムは、containers、row、columnを用いて、コンテンツの配置・調整を行います。 flexboxをご存じでない場合は、背景、用語、ガイドライン、およびコードスニペットをCSS Tricks flexbox guideから参照ください。

# API

# サブコンポーネント

# v-container

v-container provides the ability to center and horizontally pad your site’s contents. You can also use the fluid prop to fully extend the container across all viewport and device sizes. Maintains previous 1.x functionality in which props are passed through as classes on v-container allowing for the application of helper classes (such as ma-#/pa-#/fill-height) to easily be applied

# v-col

v-colv-row の直接の子要素でなければならないコンテンツホルダーです。 これは 1.x の v-flex を 2.x で置き換えたものです。

# v-row

v-rowv-col のラッパーコンポーネントです。 flex プロパティを使用して、内部の列のレイアウトとフローを制御します。 24px の標準gutterを使用します。 これは、 dense プロパティで削減するか、 no-guttersで完全に削除することができます。 これは、1.x の v-layout を 2.x の置き換えたものです。

# v-spacer

v-spacer は、親子コンポーネント間で残りの幅を分散するために使用される基本的でありながら汎用性の高い間隔コンポーネントです。 子コンポーネントの前後に単一の v-spacer を配置すると、コンポーネントはコンテナの左右にプッシュされます。 複数のコンポーネント間で複数の v-spacers を使用する場合、残りの幅は各スペーサー間で均等に分布されます。

# 注意事項

# サンプル

# Props

# Align

Change the vertical alignment of flex items and their parents using the align and align-self properties.

# Breakpoint sizing

Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.

# Justify

just プロパティを使用して、フレックスアイテムの水平方向の配置を変更します。

# No gutters

You can remove the negative margins from v-row and the padding from its direct v-col children using the no-gutters property.

# Offset

Offsets are useful for compensating for elements that may not be visible yet, or to control the position of content. Just as with breakpoints, you can set an offset for any available sizes. This allows you to fine tune your application layout precisely to your needs.

# Offset breakpoint

オフセットは、ブレークポイントごとに適用することもできます。

# Order

グリッド項目の順序を制御できます。 オフセットと同様に、サイズごとに異なる順序を設定できます。 あらゆるアプリケーションに対応する特殊な画面レイアウトをデザインできます。

# Order first and last

明示的に first またはlast を指定して、それぞれ -1 または13 の値を order CSS プロパティに割り当てることもできます。

# その他

# Column wrapping

When more than 12 columns are placed within a given row (that is not using the .flex-nowrap utility class), each group of extra columns will wrap onto a new line.

# Equal width columns

You can break equal width columns into multiple lines. While there are workarounds for older browser versions, there was a Safari flexbox bug. This shouldn’t be necessary if you’re up-to-date.

# Grow and Shrink

By default, flex components will automatically fill the available space in a row or column. They will also shrink relative to the rest of the flex items in the flex container when a specific size is not designated. You can define the column width of the v-col by using the cols prop and providing a value from 1 to 12.

# マージンヘルパー

auto margin helper ユーティリティ を使用すると、兄弟列を互いに離すことができます。

# ネストしたグリッド

非常にカスタマイズされたレイアウトを実現するために、他のフレームワークと同様にグリッドをネストすることができます。

# 1列の幅

自動レイアウトを使用する場合、1つの列の幅のみを定義でき、その前後に自動的にサイズを変更する兄弟要素が含まれます。

# Row and column breakpoints

Dynamically change your layout based upon resolution. (resize your screen and watch the top row layout change on sm, md, and lg breakpoints)

# スペーサー

The v-spacer component is useful when you want to fill available space or make space between two components.

# ユニークなレイアウト

Vuetifyグリッドシステムのパワーと柔軟性により、素晴らしいユーザーインターフェースを作成できます。

# Variable content width

カラムのブレークポイント幅の割り当ては、コンテンツの幅に基づいてサイズ変更するように設定できます。

準備はできましたか?

チーム によって選択された関連コンテンツで学習を続けるか、下のナビゲーションリンクを使用してページ間を移動します。
GitHub でこのページを編集する
最終更新日:05/07/2021, 12:56:43 AM