# Flexbox Containers en bêta : premiers pas avec la nouvelle mise en page Elementor > Elementor teste en bêta les Containers Flexbox pour remplacer sections et colonnes. Comment les activer, les nouveaux réglages flex, et nos premiers retours d'usage. - Auteur : Clément Hadrot - Publié le : 2022-01-13 - Mis à jour le : 2022-01-13 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/flexbox-containers-beta-elementor-premiers-pas/ ## L’essentiel - Activer le feature flag dans les réglages expérimentaux - Comprendre direction, justify-content, align-items et gap - Ce qui fonctionne déjà bien et ce qui reste à roder Depuis plusieurs années, la structure de mise en page d'Elementor repose sur un duo section/colonne, hérité des tout débuts du builder. Ce système fonctionne, mais il impose ses propres limites : une colonne ne peut exister qu'à l'intérieur d'une section, l'imbrication de structures complexes demande des contorsions, et certains alignements avancés restent difficiles à obtenir sans bidouiller le CSS personnalisé. Elementor propose désormais, en fonctionnalité expérimentale, une alternative construite directement sur le modèle Flexbox du CSS moderne : les Containers. Cette nouveauté est encore en bêta, désactivée par défaut, et clairement présentée comme expérimentale par l'éditeur lui-même. Elle n'a pas vocation à remplacer sections et colonnes du jour au lendemain sur les sites déjà en production. Mais elle mérite qu'on s'y penche dès maintenant, ne serait-ce que pour anticiper la bascule à venir et se familiariser avec un vocabulaire de mise en page différent. Voici nos premiers pas avec cette fonctionnalité, comment l'activer et ce qu'elle change concrètement. ## Activer les Containers depuis les réglages expérimentaux Les Containers ne sont pas actifs par défaut sur une installation standard d'Elementor. Pour les tester, il faut se rendre dans le menu Elementor, section **Fonctionnalités expérimentales** (Experiments), où le builder liste l'ensemble des fonctionnalités en cours de développement, chacune activable indépendamment. C'est dans cette liste que se trouve l'option permettant de basculer le widget Container en statut actif. Une fois l'expérimentation activée, un nouvel élément apparaît dans le panneau d'ajout de structure, aux côtés des sections et colonnes classiques. Il est recommandé de faire ce test sur un environnement de développement plutôt que directement sur un site en production : s'agissant d'une fonctionnalité bêta, son comportement peut encore évoluer d'une mise à jour à l'autre avant sa stabilisation définitive. ## Un seul élément remplace section et colonne Le changement conceptuel le plus important tient en une phrase : là où il fallait auparavant une section pour accueillir des colonnes, qui elles-mêmes accueillaient les widgets, le Container fait les deux à la fois. Un Container peut contenir directement des widgets, ou contenir d'autres Containers imbriqués, sans distinction de niveau imposée par la structure elle-même. Concrètement, cela réduit d'un cran l'imbrication nécessaire pour obtenir une mise en page équivalente, et cela simplifie des cas jusqu'ici pénibles, comme imbriquer une mise en page complexe à l'intérieur d'une seule colonne. Avec les Containers, il suffit d'ajouter un Container enfant, sans avoir à recréer toute une section interne autour de lui. > L'essentiel à retenir : Activer le feature flag dans les réglages expérimentaux ; Comprendre direction, justify-content, align-items et gap ; Ce qui fonctionne déjà bien et ce qui reste à roder ## Les nouveaux réglages flex à connaître Le panneau de réglages d'un Container introduit un vocabulaire directement issu du modèle Flexbox du CSS, ce qui demande un petit temps d'adaptation pour les habitués du système section/colonne. Les réglages principaux sont les suivants : - **Direction** : détermine si les éléments enfants s'alignent horizontalement (en ligne) ou verticalement (en colonne) à l'intérieur du Container. - **Justify Content** : contrôle la répartition des éléments enfants le long de l'axe principal défini par la direction, par exemple les regrouper au centre, les répartir avec un espace égal entre eux, ou les coller aux extrémités. - **Align Items** : contrôle l'alignement des éléments enfants sur l'axe perpendiculaire à la direction, par exemple les aligner en haut, au centre ou en bas d'un Container en ligne. - **Gap** : définit un espacement uniforme entre chaque élément enfant, sans avoir à ajouter de marge individuelle sur chacun. Ces quatre réglages, une fois assimilés, remplacent avantageusement une bonne partie des bidouilles habituelles avec les marges et paddings pour aligner des éléments côte à côte. Un Container en direction ligne, avec un `justify-content` en espacement égal et un `align-items` centré, reproduit en quelques clics une mise en page qui demandait auparavant plusieurs colonnes savamment dosées en largeur. ## Premiers retours d'usage Sur les maquettes déjà testées, les Containers apportent un vrai confort pour les mises en page horizontales de type carte ou barre d'éléments : aligner trois blocs avec un espacement identique entre chacun, quel que soit le nombre de blocs présents, devient immédiat avec `gap`, là où il fallait auparavant calculer des pourcentages de largeur de colonne. Les alignements verticaux au sein d'un même bloc, comme centrer un titre et un bouton dans un espace de hauteur fixe, sont également nettement plus simples à obtenir. Quelques points restent en revanche à roder, ce qui est attendu d'une fonctionnalité encore en bêta expérimentale : - Certains widgets tiers, conçus avant l'arrivée des Containers, ne réagissent pas encore parfaitement aux réglages flex et gardent des comportements hérités du système colonne. - La bascule d'un site existant, construit intégralement en sections et colonnes, vers des Containers ne se fait pas automatiquement : il s'agit d'une reconstruction manuelle, pas d'une simple conversion. - La documentation et les tutoriels disponibles restent encore clairsemés, la fonctionnalité étant trop récente pour avoir généré une large base de retours d'expérience communautaires. > Sur un nouveau projet démarré aujourd'hui, testez les Containers sur une page secondaire, non critique, avant de les généraliser à tout le site. Cela laisse le temps de repérer les widgets qui se comportent différemment avant de s'engager sur l'ensemble d'une mise en page. ## En résumé Les Containers Flexbox marquent un vrai changement de philosophie dans la construction de mise en page avec Elementor, en rapprochant le builder du fonctionnement natif du CSS moderne plutôt que de son propre système propriétaire de sections et colonnes. La fonctionnalité reste bêta, réservée pour l'instant aux environnements de test et aux développeurs curieux d'anticiper la suite. Mais le confort apporté sur les alignements horizontaux et les espacements uniformes donne d'ores et déjà une idée assez nette de ce que sera la construction de page une fois cette fonctionnalité stabilisée.