Comment puis-je créer une colonne centrale flexible avec des colonnes latérales à largeur fixe à l'aide de Flexbox ?

Obtenir des colonnes à largeur fixe avec une colonne centrale flexible dans une mise en page Flexbox

Dans une mise en page flexbox, la gestion des largeurs et de la flexibilité des colonnes peut être un défi. Cet article aborde le problème courant du maintien des colonnes gauche et droite à largeur fixe tout en permettant à la colonne centrale de fléchir et de remplir l'espace disponible.

Flexbox avec largeur fixe Co

Pour créer des colonnes de largeur fixe, évitez d'utiliser la propriété width, car cela pourrait entraîner un rétrécissement indésirable. Utilisez plutôt la syntaxe raccourcie flex avec des valeurs spécifiques pour flex-grow, flex-shrink et flex-basis. Par exemple :

.fixed-column {
  flex: 0 0 230px; /* Don't grow, don't shrink, start at 230px */
}

Flexion de la colonne centrale

La flexibilité de la colonne centrale lui permet de s'étendre ou de se contracter en fonction de la taille de la fenêtre. En définissant sa propriété flex sur 1 (ou toute valeur non nulle), il occupera l'espace restant après les colonnes à largeur fixe.

.flex-column {
  flex: 1 1 0; /* Grow, don't shrink, start at 0px */
}

Masquer/Afficher réactif

Pour masquer la colonne de droite sans affecter la largeur de la colonne de gauche ou la flexibilité de la colonne centrale, utilisez des requêtes multimédias CSS ou JavaScript pour basculer sa visibilité. Par exemple :

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

Exemple de code complet

En combinant les ajustements ci-dessus, un extrait de code complet pourrait ressembler à :

.fixed-column {
  flex: 0 0 230px;
}

.flex-column {
  flex: 1 1 0;
}

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

Par en mettant en œuvre ces techniques, vous pouvez obtenir efficacement une disposition flexible avec des colonnes à largeur fixe et une colonne centrale dynamique qui s'adapte à la taille de la fenêtre et à l'utilisateur. interaction.

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!