Comment puis-je créer une disposition Flexbox à trois colonnes avec des colonnes latérales à largeur fixe et une colonne centrale flexible ?

Maintenir des colonnes à largeur fixe avec un centre flexible

Vous cherchez à concevoir une disposition de boîte flexible avec trois colonnes, où les colonnes de gauche et de droite conservent une largeur fixe, tandis que la colonne centrale s'agrandit pour occuper l'espace restant. Malgré la définition des dimensions des colonnes, elles rétrécissent de manière indésirable à mesure que la taille de la fenêtre s'ajuste.

Solution

Pour obtenir la disposition souhaitée, remplacez la propriété width par la spécification flex suivante pour les colonnes à largeur fixe :

flex: 0 0 230px;

Cette spécification signifie :

• 0 pour flex-grow : ne pas agrandir la colonne.
• 0 pour flex-shrink : ne pas compresser la colonne.
• 230px pour flex -basis : définissez la largeur initiale sur 230 px.

Essentiellement, cette configuration garantit que les colonnes restent à 230px quelle que soit la taille de la fenêtre.

Fonctionnalité supplémentaire

Concernant votre exigence supplémentaire de masquer la colonne de droite en fonction de l'interaction de l'utilisateur, tout en conservant la largeur fixe de la gauche et en développant la colonne centrale en conséquence, vous pouvez incorporer les éléments suivants :

.column.center {
  flex: 1 0 calc(100% - 230px);
}

Cette modification garantit que lorsque la colonne de droite est masquée, la colonne centrale se remplit l'espace restant tandis que la colonne de gauche reste fixée à 230px.

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!