Comment puis-je créer des colonnes de largeur fixe avec un centre flexible à l'aide de Flexbox ?

Utiliser Flexbox pour obtenir des colonnes à largeur fixe avec un centre flexible

Dans le développement Web, il est souvent nécessaire de créer des mises en page combinant des éléments de largeur fixe et flexibles. colonnes de largeur. Flexbox offre une solution pratique pour réaliser cet agencement.

Lorsque l'on vise des colonnes à largeur fixe avec un centre flexible, le défi consiste à empêcher les colonnes à largeur fixe de rétrécir à mesure que la taille de la fenêtre change. Au lieu de s'appuyer sur la propriété width, qui est sujette à la mise à l'échelle dans flexbox, l'approche préférée consiste à utiliser une combinaison de flex-grow, flex-shrink et flex-basis.

Par exemple, considérez ce qui suit code :

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

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

Dans ce code, la propriété flex se compose de trois valeurs :

• flex-grow : 0 (c'est-à-dire, ne grandit pas)
• flex-shrink : 0 (c'est-à-dire, ne rétrécit pas)
• flex -base : 230px (c'est-à-dire commencer à 230px)

Cela effectivement garantit que les colonnes de gauche et de droite conservent toujours une largeur fixe de 230 px.

De plus, il convient de noter que les propriétés justifier-content et align-items peuvent être omises dans ce scénario, car leurs valeurs par défaut s'alignent sur le comportement souhaité.

Pour gérer le scénario où la colonne de droite doit être masquée, la propriété flex reste la même, car elle n'affecte pas la visibilité. Au lieu de cela, la visibilité peut être basculée à l'aide de techniques JavaScript ou CSS telles que :

#container {
    display: flex;
    max-width: 1200px;
}

.column.right {
    flex: 0 0 230px;
    border-left: 1px solid #eee;
    visibility: hidden;
}

En conclusion, en employant flex-grow, flex-shrink et flex-basis, il est possible de créer des mises en page flexbox avec des paramètres fixes. colonnes de largeur tout en conservant un centre flexible qui s'adapte à l'espace disponible.

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!