Élément à gauche et à droite
Problème et solution
Il arrive fréquement dans les designs de page web que l'on veuille placer un élément à gauche et un autre à droite de la page. Ces éléments doivent être alignés l'un par rapport à l'autre, mais séparés par un espace vide. Ce genre de design posait d'énormes problèmes dans le passé, mais aujourd'hui il existe des solutions CSS qui permettent de le faire facilement avec les mode d'affichage flex et grid.
La technique que nous allons utiliser ici utilise la disposition flex. Nous utiliserons la propriété justify-content avec la valeur space-between pour mettre de l'espace entre 2 éléments.
Mise en garde
La technique vu ci-dessus fonctionne très bien, mais elle a une petite contrainte: le conteneur doit contenir exactement 2 éléments enfants direct. Si vous avez plus d'éléments enfants, l'affichage ne sera pas celui voulu. Pour palier à ce problème, je vous conseille d'encapsuler vos éléments dans un autre conteneur, comme un <div>, pour vous assurer que le conteneur principal n'a que 2 enfants.
Voici un exemple: