Taille flexible de la technologie de mise en page adaptative CSS3

La disposition en grille prend en charge flex-size, qui est une bonne technologie de mise en page adaptative.

Les tailles Flex utilisent l'unité de taille fr, qui vient des deux premières lettres du mot « fraction » ou « unité fractionnaire » et représente une partie de la espace global.

Par exemple, la règle CSS suivante :

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

signifie qu'il y a 4 colonnes, la première colonne a une taille fixe de 100 px et la troisième colonne max-content signifie la taille qui contient simplement les éléments sans débordement ni emballage. Les 2 colonnes restantes sont toutes de tailles flexibles.

Selon les règles de calcul de la taille élastique, les deux diviseront également l'espace disponible restant (les coefficients élastiques de ces deux colonnes sont égaux, les deux sont égaux à 1).

Code de démonstration CSS3 :

#grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
    background-color: lime;
}
#score {
    background-color: yellow;
}
#stats {
    background-color: lime;
}
#message {
    background-color: orange;
}
p {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

Code HTML :

<p id="grid">
    <p id="title">Site Logo</p>
    <p id="score">Slogan</p>
    <p id="stats">User Zone</p>
    <p id="message">Message</p>
</p>

Recommandations associées :

Explication détaillée de l'élastique mise en page

Mise en page flexible

Mise en page flexible CSS3

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!