La mise en page fluide vous permet de positionner des éléments de sorte que leur alignement et leurs proportions s'ajustent automatiquement en fonction de différentes tailles et orientations de page. La mise en page fluide est particulièrement adaptée aux documents responsifs, mais peut aussi fonctionner avec des éléments de taille fixe.
Vous pouvez utiliser différentes techniques dans Google Web Designer pour créer une mise en page fluide :
Flexbox (Fluid Layout) - Google Web Designer
Valeurs basées sur des pourcentages
Vous pouvez définir des tailles et des positions en pourcentages plutôt qu'en pixels. Ainsi, les éléments restent proportionnels et relativement alignés les uns par rapport aux autres.
Pour utiliser des valeurs en pourcentages plutôt qu'en pixels, cliquez sur px dans le champ du panneau "Propriétés", puis sélectionnez % dans la liste déroulante.
Pour convertir toutes les valeurs de position et de taille en pourcentages, cliquez sur le bouton Utiliser des pourcentages .
Vous pouvez utiliser une combinaison de valeurs en pourcentages et en pixels dans votre document.
Ancrage
L'ancrage vous permet d'aligner les éléments d'un conteneur de manière persistante, même lorsque la taille, les marges internes ou la largeur de bordure d'un élément ou d'un conteneur changent. Toutes les propriétés de position ou de translation que vous définissez décalent l'élément par rapport au point d'ancrage.
Vous sélectionnez un mode d'ancrage horizontal et un mode d'ancrage vertical. La valeur par défaut est "en haut à gauche".
Modes d'ancrage horizontal
| Mode | Effet |
|---|---|
| gauche | Le bord gauche de l'élément est aligné sur le bord gauche du conteneur. |
| centre | Le centre horizontal de l'élément est aligné sur le centre horizontal du conteneur. |
| droite | Le bord droit de l'élément est aligné sur le bord droit du conteneur. |
Modes d'ancrage vertical
| Mode | Effet |
|---|---|
| haut | Le bord supérieur de l'élément est aligné sur le bord supérieur du conteneur. |
| milieu | Le milieu vertical de l'élément correspond au milieu vertical du conteneur. |
| bas | Le bord inférieur de l'élément est aligné sur le bord inférieur du conteneur. |
Vous pouvez définir le mode d'ancrage dans le panneau "Propriétés" ou dans la barre d'options lorsque l'outil de sélection est actif.
Flexbox
Flexbox (CSS Flexible Box Layout Module) permet d'organiser de manière flexible les éléments d'un conteneur sur des lignes ou dans des colonnes. Chaque élément peut se développer ou se réduire afin d'optimiser l'espace disponible dans celui-ci, tout en conservant l'ordre et l'espacement spécifiés.
Vous pouvez utiliser et configurer les propriétés Flexbox dans l'onglet Flexbox du panneau "Responsive". En savoir plus sur l'utilisation de Flexbox