Comprendre le flex-culte, le flex-shrink et le bassin flexible

Comprenez profondément l'interaction des propriétés CSS flex-grow , flex-shrink et flex-basis . Lorsque nous appliquons des attributs CSS, beaucoup de choses se produisent dans les coulisses. Par exemple, supposons que nous ayons le HTML suivant:

<div>
  <div>Enfant</div>
  <div>Enfant</div>
  <div>Enfant</div>
</div>

Ensuite, nous écrivons des CSS:

 .parent {
  Affichage: flex;
}

En fait, en plus de la ligne ci-dessus du code CSS, nous appliquons également implicitement une série d'attributs à .child , comme si nous écrivions le style suivant nous-mêmes:

 .enfant {
  Flex: 0 1 Auto; / * Valeur flexible par défaut * /
}

En effet, certaines propriétés ont des valeurs par défaut qui sont destinées à être remplacées par nous. Sans comprendre le style de ces applications implicites, la mise en page peut devenir très déroutante et difficile à gérer.

flex est un attribut CSS raccourci, qui établit trois attributs CSS indépendants en même temps. Par conséquent, l'abréviation ci-dessus est équivalente à:

 .enfant {
  Flex-Grow: 0;
  flex-shrink: 1;
  Flex-bass: Auto;
}

Les attributs d'abréviation regroupent plusieurs attributs CSS ensemble, ce qui permet d'écrire plusieurs attributs à la fois, tout comme les attributs background .

Bien que les propriétés d'abréviation puissent être déroutantes, pour Flexbox, il est recommandé d'utiliser l'abréviation car il existe une interaction complexe entre flex et ses sous-propriétés.

Le style par défaut est très utile car dans la plupart des cas, nous n'avons pas besoin de connaître les détails de ces propriétés Flexbox. Par exemple, lorsque nous utilisons Flexbox, nous écrivons généralement comme ceci:

 .parent {
  Affichage: flex;
  justifier-contenu: espace-intermédiaire;
}

Nous n'avons même pas besoin de nous soucier des éléments enfants ou des styles qui leur sont appliqués. Mais ce n'est que la pointe de l'iceberg de Flexbox.

Et si nous voulions approfondir le fonctionnement du Flexbox, y compris les propriétés flex-grow , flex-shrink et flex-basis , et comment les utiliser pour créer des dispositions plus complexes?

Commençons par la vue d'ensemble simplifiée et revenons à l'attribut flex par défaut appliqué aux éléments enfants:

 .enfant {
  Flex: 0 1 Auto;
}

Ces styles par défaut indiquent aux éléments enfants comment s'étirer et rétrécir. Je comprends généralement ces propriétés d'abréviation comme:

 / * Comment puis-je penser aux règles ci-dessus dans mon esprit * /

.enfant {
  flex: [flex-culde] [flex-shrink] [flex-basis];
}

/* ou... */

.enfant {
  Flex: [maximum] [minimum] [taille idéale];
}

La première valeur flex-grow est par défaut à 0, ce qui signifie que l'élément ne se développe pas (principalement). La taille de l'élément dépend de son contenu. Par exemple:

 .parent {
  Affichage: flex;
}

Si nous modifions la valeur par défaut de flex-grow de 0 à 1:

 .enfant {
  Flex: 1 1 Auto;
}

Ensuite, tous les éléments distribueront également l'espace de l'élément .parent , mais seulement si leur contenu a la même longueur. Cela équivaut à:

 .enfant {
  Flex-Crow: 1;
}

Si nous voulons que l'un des éléments grandisse plus que les autres, nous pouvons le faire:

 .child-trois {
  Flex: 3 1 Auto;
}

/* ou... */

.child-trois {
  Flex-Crow: 3;
}

flex-shrink est la deuxième valeur de l'abréviation:

 .enfant {
  Flex: 0 1 Auto; / * flex-shrink = 1 * /
}

flex-shrink indique au navigateur la taille minimale de l'élément. La valeur par défaut est 1, ce qui signifie que le même espace est toujours occupé. Si défini sur 0:

 .enfant {
  Flex: 0 0 Auto;
}

L'élément ne rétrécira pas.

flex-basis est la dernière valeur ajoutée à flex par défaut, qui indique à l'élément de maintenir la taille idéale. La valeur par défaut est auto , ce qui signifie "Utilisez ma hauteur ou ma largeur".

Lorsque nous définissons flex-basis à 1000px:

 .child-trois {
  Flex: 0 1 1000px;
}

Nous disons au navigateur d'essayer de prendre 1000 pix d'espace. Si ce n'est pas possible, l'élément prendra de l'espace proportionnellement en fonction des autres éléments.

Si nous voulons empêcher l'élément de rétrécir:

 .child-trois {
  Flex: 0 0 1000px;
}

La définition de flex-wrap modifiera la mise en page:

 .parent {
  Affichage: flex;
  wrap flex: enveloppement;
}

en tout:

• Essayez d'utiliser l'abréviation de flex .
• Lorsque vous utilisez l'abréviation, n'oubliez pas la taille maximale, minimale et idéale.
• Le contenu des éléments affecte également le fonctionnement de ces valeurs.

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!