Grille et Flexbox-tutoriel CSS-php.cn

Grille et Flexbox

王林

Libérer： 2024-09-10 18:00:09

original

759 Les gens l'ont consulté

Grid and Flexbox

Grid et Flexbox sont tous deux de puissants systèmes de mise en page en CSS, chacun conçu pour différents types de tâches de mise en page. Voici une comparaison des deux, ainsi que des exemples pour illustrer leurs différences :

Boîte flexible

Objectif :
Flexbox est conçu pour les mises en page unidimensionnelles. Il gère l'alignement et l'espacement des éléments le long d'un seul axe (ligne ou colonne).

Caractéristiques principales :

Alignez les éléments horizontalement ou verticalement.
Répartir l'espace dans un conteneur.
Contrôlez l'ordre et la taille des articles de manière flexible.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* Distributes space between items */
            align-items: center; /* Aligns items vertically in the center */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
            flex: 1; /* Makes items flexible */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Copier après la connexion

Caractéristiques illustrées :

Les éléments sont alignés dans une rangée avec un espace réparti entre eux.
Les articles sont centrés verticalement dans le conteneur.
Les éléments grandissent et diminuent en fonction de l'espace disponible.

Grille

Objectif :
Grid est conçu pour les mises en page bidimensionnelles. Il gère simultanément les lignes et les colonnes, permettant des mises en page complexes.

Caractéristiques principales :

Créez des lignes et des colonnes.
Contrôlez le placement des éléments dans une grille.
Répartir les éléments sur plusieurs lignes et colonnes.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
            grid-gap: 10px; /* Adds space between grid items */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item:nth-child(2) {
            grid-column: span 2; /* Makes the second item span two columns */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Copier après la connexion

Caractéristiques illustrées :

Crée une grille avec trois colonnes égales.
Les éléments sont placés dans la grille avec des espaces entre eux.
Le deuxième élément s'étend sur deux colonnes.

Résumé

Flexbox : Idéal pour les mises en page unidimensionnelles (en ligne ou en colonne). Idéal pour aligner des éléments, distribuer de l'espace et gérer des mises en page simples.
Grille : Idéal pour les mises en page bidimensionnelles (lignes et colonnes). Idéal pour les conceptions plus complexes nécessitant un placement précis et un contrôle sur les deux dimensions.

Le choix entre Flexbox et Grid dépend de la complexité de votre mise en page et si vous avez besoin d'un contrôle unidimensionnel ou bidimensionnel. Souvent, les deux peuvent être utilisés ensemble pour obtenir la disposition souhaitée.

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!