Apprenez la mise en page flexible CSS3, comment créer une mise en page flexible ?

Apprenez la mise en page flexible CSS3, comment créer une mise en page Web flexible ?

Dans la conception Web, la mise en page joue un rôle essentiel. Avec une bonne mise en page, votre page Web peut paraître plus soignée, plus belle et s'adapter à différentes tailles d'écran et appareils. La mise en page flexible de CSS3 offre un moyen flexible et puissant de créer une mise en page Web. Cet article présentera ce qu'est la mise en page flexible et comment l'utiliser pour créer des mises en page flexibles.

1. Qu'est-ce que la mise en page flexible ? La mise en page flexible est une nouvelle méthode de mise en page fournie en CSS3, également appelée mise en page flexible. Il est basé sur les concepts d'axe principal et d'axe transversal et permet d'obtenir des effets de disposition flexibles en définissant une série de propriétés pour le conteneur et ses éléments internes. Grâce à une disposition flexible, nous pouvons facilement obtenir des effets tels que des éléments adaptatifs, l'alignement central et même la répartition de l'espace.

2. Conteneur flexible et article flexible

Dans la mise en page flexible, il existe deux concepts importants, à savoir le conteneur flexible et l'élément flexible. Un conteneur flexible est un élément parent qui contient un groupe d'éléments flexibles. Les propriétés et les valeurs de cet élément parent déterminent la manière dont les éléments enfants sont disposés. Les éléments Flex sont des éléments enfants directement contenus dans le conteneur Flex.

3. Attributs du conteneur flex

display : flex
1. C'est la première étape pour utiliser la disposition flex. Définissez simplement l'attribut d'affichage du conteneur sur flex pour activer la disposition flexible. Il organisera les éléments à l'intérieur du conteneur sur une ligne et, par défaut, les éléments seront triés dans l'ordre dans lequel ils apparaissent dans le HTML.
   
flex-direction
2. Cette propriété détermine la manière dont les éléments sont disposés dans le conteneur. Il a les valeurs facultatives suivantes :
   
ligne : direction horizontale, disposée de gauche à droite (valeur par défaut)
3. row-reverse : direction horizontale, disposée de droite à gauche
4. colonne : direction verticale, de haut en bas Disposition
5. column-reverse : Direction verticale, disposée de bas en haut
6. justify-content
7. Cet attribut détermine l'alignement des éléments sur l'axe principal. Il a les valeurs facultatives suivantes :
   
flex-start : aligner près de la position de départ de l'axe principal (valeur par défaut)
8. flex-end : aligner près de la position finale de l'axe principal
9. center : aligner dans le centre
10. espace entre : divisez uniformément l'espace de l'axe principal, le premier et le dernier élément sont proches des deux côtés du conteneur
11. espace-autour : divisez également l'espace sur l'axe principal, la distance entre chaque élément et entre le premier et le dernier éléments et le conteneur sont égaux
12. align-items
13. Cet attribut détermine l'intersection des éléments, l'alignement sur l'axe. Il a les valeurs facultatives suivantes :
    
flex-start : aligné près de la position de départ de l'axe transversal
14. flex-end : aligné près de la position finale de l'axe transversal
15. center : aligné au centre
16. baseline : aligné selon la ligne de base de l'élément
stretch : Étire l'élément pour remplir l'espace transversal

4. Propriétés de l'élément flex

flex-grow
1. Cette propriété détermine le taux d'expansion de l'élément flex dans l'espace restant. Si le conteneur parent dispose d'un espace supplémentaire, la valeur de la propriété flex-grow de chaque élément flex déterminera la proportion qui leur est allouée. La valeur par défaut est 0, ce qui signifie aucune mise à l'échelle.
   
flex-shrink
2. Cette propriété détermine le taux de retrait des éléments flexibles lorsque l'espace est insuffisant. Si le conteneur parent ne dispose pas de suffisamment d'espace pour accueillir tous les éléments, la valeur de la propriété flex-shrink de chaque élément flex déterminera la proportion de réduction. La valeur par défaut est 1, ce qui signifie un retrait proportionnel égal.
   
flex-basis
3. Cette propriété détermine la taille initiale de l'élément flexible dans la direction de l'axe principal. Il peut être défini sur une valeur spécifique (telle que les pixels) ou un pourcentage. La valeur par défaut est auto, qui attribue automatiquement la taille en fonction du contenu du projet.
   
align-self
4. Cette propriété détermine l'alignement des éléments individuels sur l'axe transversal. Il peut remplacer la propriété align-items du conteneur. Ses valeurs facultatives sont les mêmes que celles des éléments d'alignement.
   

5. Exemple de mise en page Web flexible

Ce qui suit est un exemple de mise en page Web créée à l'aide de la mise en page flexible :

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }

        .main {
            flex: 1;
            width: 100%;
            background-color: #eaeaea;
        }

        .sidebar {
            width: 200px;
            background-color: #ccc;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="main">
            <div class="sidebar">Sidebar</div>
            <div class="content">Content</div>
        </div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

En utilisant le code ci-dessus, vous pouvez obtenir une mise en page Web flexible, dans laquelle la tête et le bas sont fixes. hauteurs, et la partie centrale est divisée en côtés. La barre latérale et la zone de contenu, la partie centrale peut être étendue de manière flexible en fonction de la hauteur du contenu. En définissant l'attribut flex de chaque élément et l'alignement du conteneur, vous pouvez implémenter une mise en page Web qui s'adapte aux différentes tailles d'écran.

6. Résumé

La mise en page flexible de CSS3 offre un moyen flexible et puissant de créer une mise en page Web. En utilisant de manière flexible diverses propriétés des conteneurs flexibles et des éléments flexibles, vous pouvez facilement obtenir des effets tels que l'adaptation des éléments, l'alignement central et même la répartition de l'espace. En apprenant et en maîtrisant la mise en page flexible, nous pouvons créer des mises en page Web plus flexibles, plus belles et adaptables à différentes tailles d'écran et appareils.

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!