Comment puis-je positionner deux divisions côte à côte à l'aide de CSS Flexbox ?

Positionnement de deux divisions côte à côte avec CSS

Dans le développement Web, le besoin se fait sentir de positionner les éléments côte à côte. Une méthode pour y parvenir en CSS consiste à utiliser flexbox.

L'approche Flexbox

Flexbox vous permet de disposer les éléments dans une structure flexible de type grille. Pour positionner deux divs l'un à côté de l'autre :

1. Définissez le conteneur parent sur Flex : Ajoutez display: flex au div parent. Cela permet la disposition flexbox.
2. Définissez la division étroite : Pour la div qui doit avoir une largeur de 200 px, définissez sa largeur sur 200 px. De plus, vous pouvez le styliser à des fins de visibilité.
3. Autoriser la div gauche à remplir l'espace restant : Utilisez flex : 1 sur la div restante. Cette propriété indique au navigateur d'agrandir le div pour occuper l'espace disponible restant dans le conteneur parent.

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div>

En suivant cette approche, vous pouvez facilement positionner deux div côte à côte, l'un ayant une largeur fixe et l'autre remplissant l'espace restant de l'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!