recherche

Maison >interface Web >tutoriel CSS >Comment obtenir des barres latérales gauche et droite adaptatives grâce à la mise en page CSS Flex

Comment obtenir des barres latérales gauche et droite adaptatives grâce à la mise en page CSS Flex

WBOY
WBOYoriginal
2023-09-26 10:57:021571parcourir

如何通过Css Flex 弹性布局实现左右侧边栏的自适应

Comment obtenir des barres latérales gauche et droite adaptatives grâce à la mise en page élastique CSS Flex

Introduction : Avec le développement continu de la conception Web, réaliser une mise en page adaptative des pages est devenue une exigence importante. La mise en page CSS Flex est un bon moyen de résoudre ce problème. Cet article présentera comment implémenter la disposition adaptative des barres latérales gauche et droite via la disposition élastique CSS Flex et donnera des exemples de code détaillés.

1. Introduction à Flex Layout
1.1 Conteneur flexible et éléments flexibles
La mise en page Flex implémente la mise en page en définissant les éléments enfants du conteneur comme éléments flexibles. L'élément parent est appelé conteneur flexible et les éléments enfants sont appelés éléments flexibles. Dans un conteneur flexible, nous pouvons contrôler la disposition des sous-éléments et l'espace qu'ils occupent en définissant certaines propriétés.

1.2 Propriétés des conteneurs flexibles

  • affichage : flex : définit le conteneur comme un conteneur flexible ;
  • flex-direction : définit la disposition des éléments flexibles, qui peuvent être définis en ligne (direction horizontale) ou en colonne (direction verticale) );
  • justify-content : définissez l'alignement des éléments flexibles sur l'axe principal, qui peut être défini sur flex-start (le point de départ est près de la gauche ou du haut), flex-end (le point final est près de la droite ou en bas), centre (alignement central), espace entre (aligner les deux extrémités, l'espacement entre les éléments est égal), espace autour (l'espacement des deux côtés de l'élément est égal, l'espacement entre les éléments est la moitié de l'original
  • align-items : définissez l'alignement des éléments flexibles sur l'axe transversal, vous pouvez définir Pour flex-start (le point de départ est près du haut ou à gauche), flex-end (le point final est près du bas ou à droite), centre (alignement au centre), étirement (étirer pour remplir tout l'axe transversal), alignement de la ligne de base (la ligne de base de la première ligne de texte de l'élément).

1. Propriétés des éléments flexibles

  • flex : Définissez le taux de mise à l'échelle des éléments flexibles : 0, ce qui équivaut à max-width : none ; la valeur spécifique peut être entière (comme 1) ou décimale (comme 1,5) ;
  • flex-basis : définit la taille initiale de l'élément flexible sur l'axe principal. La valeur par défaut est auto, ce qui équivaut à la taille d'origine. de l'élément ;
  • align-self : définissez l'alignement de l'élément flexible sur lui-même sur l'axe transversal.

2. Exemple de disposition adaptative des barres latérales gauche et droite
Utilisons un exemple spécifique pour démontrer comment implémenter la disposition adaptative des barres latérales gauche et droite via la disposition élastique CSS Flex. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右侧边栏自适应布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: flex;
            flex-direction: row;
        }
        
        .sidebar {
            background-color: #f1f1f1;
            width: 20%;
            flex-grow: 1;
        }
        
        .content {
            background-color: #eee;
            width: 80%;
            flex-grow: 3;
        }
        
        .sidebar, .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>左侧边栏</h2>
            <p>左侧边栏内容</p>
        </div>
        <div class="content">
            <h1>主要内容区域</h1>
            <p>主要内容</p>
        </div>
    </div>
</body>
</html>

Le code ci-dessus est un simple exemple de disposition des barres latérales gauche et droite. Nous organisons les éléments enfants dans le sens horizontal en définissant le display: flex; et le flex-direction: row; du conteneur. display: flex; 和 flex-direction: row; 使得子元素在水平方向上排列。

左侧边栏的 width: 20%; 和右侧内容区域的 width: 80%; 控制了两者在水平方向上的占比，即左边栏占 20% 宽度，内容区域占 80% 宽度。

通过设置左侧边栏的 flex-grow: 1; 和右侧内容区域的 flex-grow: 3;

La width : 20 % ; de la barre latérale gauche et la width : 80 % ; de la zone de contenu de droite contrôlent la proportion des deux dans la direction horizontale, c'est-à-dire c'est-à-dire la gauche. Les colonnes occupent 20 % de la largeur et la zone de contenu occupe 80 % de la largeur.


En définissant flex-grow: 1; sur la barre latérale gauche et flex-grow: 3; sur la zone de contenu de droite, nous réalisons l'ajustement automatique de la gauche et les barres latérales droites s’adaptent. Cela signifie que la barre latérale gauche occupera 1/4 de l'espace disponible et que la zone de contenu de droite occupera 3/4 de l'espace disponible.

🎜Conclusion : 🎜Il est relativement simple d'implémenter la disposition adaptative des barres latérales gauche et droite via la disposition élastique Css Flex. Il nous suffit de définir le conteneur parent sur un conteneur flex et d'utiliser les propriétés pertinentes de flex pour contrôler le tri, proportion d’alignement et d’occupation de l’espace des éléments enfants. Cet article donne un exemple de code spécifique auquel les lecteurs peuvent se référer et dont ils peuvent tirer des leçons. J'espère que cet article vous aidera ! 🎜

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!

css auto display column flex
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter une mise en page à deux colonnes via la mise en page CSS FlexArticle suivant：Comment implémenter une mise en page à deux colonnes via la mise en page CSS Flex

Articles Liés

Voir plus