Comment puis-je conserver des colonnes latérales de largeur fixe tout en permettant à une colonne centrale d'être flexible ?

Garantir des colonnes à largeur fixe avec une colonne centrale flexible

Dans la recherche d'une mise en page Web flexible, il est souvent souhaitable d'avoir deux colonnes fixes. colonnes de largeur avec une colonne centrale qui ajuste sa largeur de manière dynamique. Cependant, les utilisateurs rencontrent généralement des problèmes de réduction des colonnes fixes à mesure que la fenêtre du navigateur se rétrécit.

Pour résoudre ce problème, il est crucial d'éviter de spécifier la propriété width sur les colonnes fixes. Utilisez plutôt les propriétés spécialisées de flexbox pour contrôler le comportement de la colonne.

L'approche préférée consiste à utiliser flex: 0 0 230px; pour les colonnes de gauche et de droite. Cela demande au navigateur de maintenir une largeur fixe de 230 px pour ces colonnes, garantissant qu'elles restent constantes quelle que soit la taille de la fenêtre.

flex : 0 0 230px ; se déconstruit en trois parties :

• 0 signifie aucune croissance (flex-grow)
• 0 signifie aucun retrait (flex-shrink)
• 230px précise l'initiale et la fixe width (flex-basis)

De plus, il est possible de masquer la colonne de droite de manière réactive en utilisant Propriété de commande CSS de flexbox. Cela permet à la colonne centrale de remplir l'espace vacant créé par la colonne de droite cachée, tout en conservant un comportement flexible.

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!