Comment créer une disposition Flexbox à trois colonnes avec des colonnes extérieures à largeur fixe ?

Disposition Flexbox à trois colonnes avec colonnes extérieures à largeur fixe

Vous essayez d'établir une disposition Flexbox à trois colonnes avec des colonnes extérieures à largeur fixe et un centre flexible colonne. Malgré la définition des dimensions de ces colonnes, elles semblent rétrécir à mesure que la fenêtre d'affichage se rétrécit.

Solution

La clé de cette disposition consiste à utiliser la flexibilité au lieu de la largeur. Remplacez width par la propriété flex dans votre CSS :

#container {
  display: flex;
}

.column.left,
.column.right {
  flex: 0 0 230px;
}

Voici ce que signifie chaque valeur de la propriété flex :

• 0 pour flex-grow : cela empêche les colonnes de croître au-delà de leur largeur initiale.
• 0 pour flex-shrink : Cela empêche les colonnes de rétrécir en dessous de leur largeur initiale. width.
• 230px pour flex-basis : Ceci définit la largeur initiale des colonnes à 230px.

En définissant ces propriétés, vous définissez des dimensions fixes pour les colonnes extérieures qui resteront constante même lorsque la fenêtre d'affichage change.

Remarque supplémentaire

Pour l'exigence facultative de masquer la colonne de droite, définissez simplement la propriété d'affichage de .column.right sur none :

.column.right {
  display: none;
}

Cela masquera la colonne de droite tout en préservant la largeur fixe de la colonne de gauche et la largeur flexible de la colonne centrale.

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!