Maison > Article > interface Web > 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 é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
1. Propriétés des éléments flexibles
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;
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.
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!