## レイアウト 24 カラムを基本レイアウトで、簡単、素早く作れます。 :::tip The component uses flex layout by default, no need to set `type="flex"` manually. Please note that the parent container should avoid using `inline` related styles, which will cause the component to not fill up its width. ::: ### ベーシックレイアウトカラムを用いて、ベーシックグリッドレイアウトを作ります。 :::demo `row` と `col` を使えば、`span` 属性を使って簡単にレイアウトを操作することができます。 ```html

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

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

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

``` ::: ### 配置 Default use the flex layout to make flexible alignment of columns. :::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around. ```html

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

``` ::: ### 要素を隠すためのユーティリティクラスさらに、Element Plus は、特定の条件下で要素を隠すための一連のクラスを提供します。これらのクラスは、任意の 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 | | 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 |