Présentation de Flex (1.0)

Qu'est-ce que Flex ?

Flex offre un nouveau mode de conception des sections et des pages, reposant sur une technologie de modification inline et des mises en page flexibles, comme les grilles CSS, Flex, un meilleur alignement, etc. Grâce à Flex, profitez d'une totale réactivité et d'une précision au pixel près pour tous vos éléments par point d'interruption.

Flex s'intègre parfaitement au créateur existant, permettant ainsi aux utilisateurs de choisir le moment et l'endroit où l'utiliser. En d'autres mots, Flex regroupe tous les avantages de notre créateur et offre encore plus de fonctionnalités de conception.

Ajouter des sections Flex

Pour ajouter une section Flex :

1. Survolez l'espace entre les lignes et cliquez sur le bouton Ajouter une section. Les sections s'affichent dans le panneau latéral. Sinon, faites un clic droit pour ouvrir le menu contextuel et cliquez sur Ajouter une section.
2. Dans le panneau latéral, cliquez sur Sections Flex.
3. Cliquez sur la section Flex à ajouter. Ensuite, en haut de la page, cliquez sur Enregistrer.
4. Le mode Flex s'ouvre avec la section à modifier.

Pour en savoir plus, consultez l'article Ajouter et modifier des sections Flex (1.0).

Présentation du mode Flex

Panneau de calques

Le panneau de calques se trouve sur le côté gauche de l'éditeur. Il affiche les éléments de la page (grilles, widgets, flexboxes, zones de texte, etc.). Depuis ce panneau, il vous est possible de sélectionner, réorganiser et renommer les éléments. Le panneau de calques débute toujours par la section, sous laquelle se trouvent les grilles, puis les widgets ou conteneurs.

Vous pouvez également passer d'un élément à l'autre en réalisant les étapes suivantes :

• Sélectionnez un élément dans la grille afin de rediriger vers l'élément dans le menu qui apparaît au-dessus.
  
• Cliquez sur les breadcrumbs au-dessus du panneau Design.

Panneau Design

Le panneau Design apparaît sur le côté droit de l'éditeur et regroupe toutes les commandes de design disponibles pour l'élément sélectionné (conteneur, flexbox, widget). Les options de design comprennent la mise en page, le redimensionnement, l'alignement, etc.

Panneau Design : dimensions

Flex vous permet de choisir parmi plusieurs options de mesure.

• Pixel (px) : la taille est identique à chaque point d'interruption.
• Largeur du viewport (vw) : % de la largeur de l'élément lorsqu'il est affiché sur un écran. 10 vw correspond à 10 % de la largeur de viewport. 100 vw représente 100 % de la largeur de l'écran. Par défaut, la taille des marges et des widgets est définie en %.
• Hauteur du viewport (vh) : % de la hauteur de l'élément lorsqu'il est affiché sur un écran. 10 vh correspond à 10 % de la hauteur de viewport sur un écran.
• A : la taille est automatiquement définie en fonction du contenu.
• Min & Max : la mesure la plus petite et la plus grande d'un élément. Ce paramètre permet de garantir que l'élément ne sera ni plus grand ni plus petit que cette valeur lors du redimensionnement.

Alignement

Organiser

Vous pouvez réorganiser les éléments qui se superposent dans les panneaux Design et Calques, en déplaçant simplement ces derniers en dessous ou au-dessus.

Flexbox : alignement manuel ou automatique

Dans le panneau Design se trouvent deux paramètres d'alignement automatique pour les flexboxes.

• Sous Mise en page, sélectionnez une mise en page verticale ou horizontale afin de définir un axe de référence pour les éléments de la flexbox.
• Sous Aligner dans flexbox, déterminez la façon dont les éléments seront placés dans l'axe sélectionné.
  
• Sous Alignement, sélectionnez la façon dont la flexbox sera alignée par rapport à la grille. Vous pouvez uniquement l'aligner sous l'axe contraire.
  
• Sous Alignement, sélectionnez l'emplacement dans une flexbox (p. ex., un bouton) où l'élément est aligné, sur l'axe de mise en page automatique sélectionné.
  

ÉPINGLER

Dans le panneau Design, vous pouvez épingler des éléments à une position spécifique dans une cellule. L'emplacement demeurera alors identique à la cellule lorsque la taille de cette dernière est modifiée.

Pour épingler un élément à une position dans une cellule :

1. Sélectionnez l'élément puis, dans le panneau Design, faites défiler jusqu'à Position.
2. En regard de l'option Épingler, cliquez sur la flèche correspondant à l'endroit où épingler l'élément dans la cellule.
   

L'élément reste épinglé à cet emplacement dans la cellule, même en cas de modification de la taille de la grille.

Points d'interruption

Un point d'interruption correspond à la taille à laquelle le design s'ajuste pour une largeur d'écran donnée. Les points d'interruption permettent d'obtenir un design responsive au fur et à mesure des modifications. Les points d'interruption par défaut dans Flex sont les suivants :

• Bureau (1025 px – 1399 px)

• Bureau étendu (à partir de 1400 px)

• Tablette (768 px – 1024 px)

• Mobile (jusqu'à 767 px)

• Mobile format paysage (468 px – 767 px)

Vous pouvez passer d'un point d'interruption à un autre en haut de la page en cliquant sur les différentes vues.

Vous pouvez également masquer certains éléments aux points d'interruption spécifiques. Pour en savoir plus sur les points d'interruption et comment masquer des éléments, consultez l'article Points d'interruption Flex (1.0).