## Layout Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes. ### Mise en page basique Créez une grille de mise en page basique grâce aux colonnes. :::demo Grâce à `row` et `col`, vous pouvez arranger la mise en page en utilisant l'attribut `span`. ```html

``` ::: ### Espacement L'espacement entre colonnes est configurable. :::demo Utilisez l'attribut `gutter` dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0. ```html

``` ::: ### Mise en page complexe Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez. :::demo ```html

``` ::: ### Décalage des colonnes Vous pouvez spécifier un décalage pour les colonnes. :::demo Utiliser l'attribut `offset` pour régler le décalage. ```html

``` ::: ### Alignement Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible. :::demo Vous pouvez activer la mise en page flex en réglant l'attribut `type` à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut `justify` définit à 'start', 'center', 'end', 'space-between' ou 'space-around'. ```html

``` ::: ### Mise en page responsive Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl. :::demo ```html

``` ::: ### Classes pour cacher certains éléments Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser: ```js import 'element-ui/lib/theme-chalk/display.css'; ``` Ces classes sont: - `hidden-xs-only` - disparaît sur les très petits viewports uniquement - `hidden-sm-only` - disparaît sur les petits viewports uniquement - `hidden-sm-and-down` - disparaît sur les petits viewports et plus petits - `hidden-sm-and-up` - disparaît sur les petits viewports et plus grand - `hidden-md-only` - disparaît sur les viewports moyens uniquement - `hidden-md-and-down` - disparaît sur les viewports moyens et plus petits - `hidden-md-and-up` - disparaît sur les viewports moyens et plus grand - `hidden-lg-only` - disparaît sur les viewports larges uniquement - `hidden-lg-and-down` - disparaît sur les viewports larges et plus petits - `hidden-lg-and-up` - disparaît sur les viewports larges et plus grand - `hidden-xl-only` - disparaît sur les viewports très larges uniquement ### Attributs des lignes | Attribut | Description | Type | Valeurs acceptées | Défaut | |---------- |-------------- |---------- |-------------------------------- |-------- | | gutter | Espacement de la grille. | number | — | 0 | | type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — | | justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start | | align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top | | tag | Élément de tag personnalisé. | string | * | div | ### Attributs des colonnes | Attribut | Description | Type | Valeurs acceptées | Défaut | |---------- |-------------- |---------- |-------------------------------- |-------- | | span | Nombre de colonnes sur lesquelles l'élément s'étend. | number | — | 24 | | offset | Nombre d'espacements sur la gauche de l'élément. | number | — | 0 | | push | Nombre de colonnes dont l'élément se déplace vers la droite. | number | — | 0 | | pull | Nombre de colonnes dont l'élément se déplace vers la gauche. | number | — | 0 | | xs | `<768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — | | sm | `≥768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — | | md | `≥992px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — | | lg | `≥1200px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — | | xl | `≥1920px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — | | tag | Élément de tag personnalisé. | string | * | div |