## レイアウト 24カラムを基本レイアウトで、簡単、素早く作れます。 ### ベーシックレイアウトカラムを用いて、ベーシックグリッドレイアウトを作ります。 :::demo `row` と `col` を使えば、`span` 属性を使って簡単にレイアウトを操作することができます。 ```html

``` ::: ### カラム間隔カラム間隔もサポートされてます。 :::demo 行にはカラム間の間隔を指定するための `gutter` 属性があり、デフォルト値は0です。 ```html

``` ::: ### ハイブリッドレイアウト基本の1/24カラムを組み合わせて、より複雑なハイブリッドレイアウトを形成できます。 :::demo ```html

``` ::: ### カラムオフセットオフセットを指定することができます。 :::demo Colの`offset`属性の値を設定することで、カラムのオフセット数を指定することができます。 ```html

``` ::: ### 配置フレックスレイアウトを使用して、列の配置を柔軟に行うことができます。 :::demo `type` 属性に `flex` を設定することでフレックスレイアウトを有効にし、`justify` 属性に start, center, end, space-between, space-around を設定することで子要素のレイアウトを定義することができます。 ```html

``` ::: ### レスポンシブレイアウト Bootstrapのレスポンシブデザインを例にとると、xs, sm, md, lg, xlの5つのブレイクポイントがプリセットされています。 :::demo ```html

``` ::: ### 要素を隠すためのユーティリティクラスさらに、Element は、特定の条件下で要素を隠すための一連のクラスを提供します。これらのクラスは、任意の DOM 要素やカスタムコンポーネントに追加することができます。これらのクラスを使用するには、以下のCSSファイルをインポートする必要があります。 ```js import 'element-plus/lib/theme-chalk/display.css'; ``` クラス: - `hidden-xs-only` - xs ビューポートのとき、非表示にする - `hidden-sm-only` - sm ビューポートのとき、非表示にする - `hidden-sm-and-down` - sm ビューポート以下のとき、非表示にする - `hidden-sm-and-up` - sm ビューポート以上のとき、非表示にする - `hidden-md-only` - md ビューポートのとき、非表示にする - `hidden-md-and-down` - md ビューポート以下のとき、非表示にする - `hidden-md-and-up` - md ビューポート以上のとき、非表示にする - `hidden-lg-only` - lg ビューポートのとき、非表示にする - `hidden-lg-and-down` - lg ビューポート以下のとき、非表示にする - `hidden-lg-and-up` - lg ビューポート以上のとき、非表示にする - `hidden-xl-only` - xl ビューポートのとき、非表示にする ### 行属性 | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | gutter | グリッド間隔 | number | — | 0 | | type | レイアウトモード、フレックスを使用することができます、モダンなブラウザで動作します。 | string | — | — | | justify | フレックスレイアウトの水平配置 | string | start/end/center/space-around/space-between | start | | align | フレックスレイアウトの垂直配置 | string | top/middle/bottom | top | | tag | カスタムエレメントタグ | string | * | div | ### 列属性 | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | span | グリッドスパンの列数 | number | — | 24 | | offset | 左辺のグリッドのスペースの数 | number | — | 0 | | push | グリッドが右に移動する列数 | number | — | 0 | | pull | グリッドが左に移動する列数 | number | — | 0 | | xs | `<768px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — | | sm | `≥768px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — | | md | `≥992px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — | | lg | `≥1200px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — | | xl | `≥1920px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — | | tag | カスタムエレメントタグ | string | * | div |