Explication graphique détaillée de la façon d'utiliser la propriété CSS align-content

La plupart des travailleurs front-end devraient être familiers avec certaines des propriétés CSS couramment utilisées, parlons donc aujourd'hui de propriétés CSS légèrement inhabituelles. Savez-vous comment utiliser la propriété CSS align-content ? Quelles sont les valeurs d'attribut d'align-content ? Pour ceux qui veulent savoir, continuez à lire ci-dessous.

1. Définition et utilisation de l'attribut CSS align-content

Définition : L'attribut align-content n'occupe pas tous les éléments disponibles sur l'axe transversal dans le flexible conteneur d’espace pour aligner les éléments dans le conteneur (verticalement).

Fonction : Définit la disposition verticale des éléments à l'intérieur de la boîte gratuite.

Condition : L'attribut display:flex doit être défini sur l'élément parent, et le retour à la ligne doit être défini, flex-wrap:wrap pour que le réglage de cet attribut prenne effet.

Paramètre : cet attribut affecte les éléments dans son conteneur, il suffit donc de le définir sur l'élément parent.

La valeur de align-content peut être définie selon les besoins lors de son utilisation.

étirement : étiré pour s'adapter au conteneur (par défaut).
centre : Situé au centre du conteneur.
flex-start : Situé au début du conteneur.
flex-end : Situé à l’extrémité du conteneur.
espace entre : situé dans un conteneur avec un espace blanc entre les lignes.
espace autour : situé dans un conteneur avec un espace blanc avant, entre et après chaque ligne.

Écriture : align-content : stretch|center|flex-start|flex-end|space-between|space-around

Analyse d'instance d'alignement de contenu

Description : Il y a quatre petits div dans le div externe Afin de voir clairement l'effet, j'ai défini différentes couleurs pour celui-ci, puis j'ai ajouté align-content: center;
au grand div. Le div à l’intérieur peut être centré verticalement dans le conteneur. Le code est le suivant :

Partie HTML :

<div class="box">
    <div style="background-color:red;"></div>
     <div style="background-color:orange;"></div>
     <div style="background-color:yellow;"></div>
     <div style="background-color:green;"></div>
  </div>

Partie CSS :

.box {
      width: 100px;
      height: 300px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      align-content: center;
  } 
  .box div {
      width: 100px;
      height: 50px;
  }

Rendu :

Résumé : L'effet d'image est clair en un coup d'œil. Après avoir défini align-content: center sur l'élément parent, les éléments à l'intérieur sont centrés verticalement dans le conteneur. Quant aux autres effets, je ne le ferai pas. démontrez-les un par un ici. Vous pouvez l'essayer vous-même pour voir si cela est cohérent avec la conclusion, en particulier les débutants devraient s'entraîner davantage.

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!