Comment utiliser de manière flexible la mise en page élastique CSS Flex pour réaliser la mise en page de pages Web-tutoriel CSS-php.cn

Comment utiliser de manière flexible la mise en page élastique CSS Flex pour réaliser la mise en page de pages Web

WBOY

Libérer： 2023-09-26 11:57:03

original

1559 Les gens l'ont consulté

如何灵活运用Css Flex 弹性布局实现网页布局

Comment utiliser de manière flexible la mise en page élastique CSS Flex pour implémenter la mise en page Web

La mise en page élastique CSS Flex est une puissante technologie de mise en page Web qui peut nous aider à obtenir une mise en page très flexible et réactive. Cet article explique comment utiliser la mise en page élastique CSS Flex pour implémenter la mise en page de pages Web et fournit des exemples de code spécifiques.

1. Concepts de base

Avant d'utiliser la mise en page élastique CSS Flex, vous devez comprendre certains concepts de base.

Conteneur : l'élément parent auquel la mise en page CSS Flex est appliquée, c'est-à-dire l'élément qui contient les éléments enfants à mettre en page.
Item : l'élément enfant dans le conteneur, c'est-à-dire l'élément à disposer.
Axe principal : la direction horizontale par défaut, qui est la direction dans laquelle les éléments sont disposés.
Axe croisé : La direction perpendiculaire à l'axe principal.

2. Comment utiliser

Définissez l'attribut d'affichage du conteneur sur flex pour permettre une mise en page flexible.

.container {
  display: flex;
}

Copier après la connexion

Définissez la propriété flex de l'élément pour ajuster le rapport de largeur de l'élément. La propriété flex est l'abréviation de trois valeurs, représentant flex-grow, flex-shrink et flex-basis. Parmi eux, flex-grow représente le taux d'agrandissement de l'élément, et la valeur par défaut est 0 ; flex-shrink représente le taux de rétrécissement de l'élément, et la valeur par défaut est 1 flex-basis représente la taille initiale de l'élément, et le la valeur par défaut est automatique.

.item {
  flex: 1; /* 项目的宽度将平均分配，即每个项目占据相同的空间 */
}

.item {
  flex: 2; /* 第一个项目占据2份空间，其他项目各占据1份空间 */
}

Copier après la connexion

Définissez la propriété flex-direction du conteneur pour contrôler la direction de disposition des éléments. La valeur par défaut est rangée, ce qui signifie une disposition horizontale ; définie sur colonne, ce qui signifie une disposition verticale.

.container {
  flex-direction: row; /* 默认值，水平排列 */
}

.container {
  flex-direction: column; /* 垂直排列 */
}

Copier après la connexion

Définissez la propriété justification-content du conteneur pour ajuster l'alignement de l'élément sur l'axe principal.

.container {
  justify-content: flex-start; /* 默认值，左对齐 */
}

.container {
  justify-content: flex-end; /* 右对齐 */
}

.container {
  justify-content: center; /* 居中对齐 */
}

.container {
  justify-content: space-between; /* 两端对齐，项目之间的间距相等 */
}

.container {
  justify-content: space-around; /* 项目两侧的间距是相邻项间距的一半 */
}

Copier après la connexion

Définissez la propriété align-items du conteneur pour ajuster l'alignement des éléments sur l'axe transversal.

.container {
  align-items: flex-start; /* 顶部对齐 */
}

.container {
  align-items: flex-end; /* 底部对齐 */
}

.container {
  align-items: center; /* 居中对齐 */
}

.container {
  align-items: stretch; /* 默认值，拉伸填充容器 */
}

Copier après la connexion

Définissez la propriété align-content du conteneur pour ajuster l'alignement des éléments multilignes sur l'axe transversal.

.container {
  align-content: flex-start; /* 顶部对齐 */
}

.container {
  align-content: flex-end; /* 底部对齐 */
}

.container {
  align-content: center; /* 居中对齐 */
}

.container {
  align-content: space-between; /* 两端对齐，项目之间的间距相等 */
}

.container {
  align-content: space-around; /* 项目两侧的间距是相邻项间距的一半 */
}

.container {
  align-content: stretch; /* 默认值，拉伸填充容器 */
}

Copier après la connexion

3. Exemple de code

Ce qui suit est un exemple simple de mise en page de page Web, implémenté à l'aide de la mise en page élastique CSS Flex.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #f2f2f2;
      }

      .item {
        flex: 1;
        text-align: center;
        padding: 20px;
        background-color: #ccc;
      }
    </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

Le code ci-dessus définit le conteneur comme étant disposé horizontalement, avec un espacement égal entre les éléments, des éléments centrés sur l'axe transversal et une couleur de fond gris clair. Chaque élément a la même largeur et le contenu du texte est centré à l'intérieur de l'élément.

Résumé :

L'utilisation de la mise en page élastique CSS Flex peut implémenter rapidement et de manière flexible la mise en page des pages Web. En définissant les propriétés du conteneur et des éléments, vous pouvez contrôler la disposition et l'alignement des éléments sur les axes principal et transversal. Dans le même temps, le rapport de largeur de l'élément peut être ajusté en définissant la propriété flex de l'élément. Ce qui précède est un exemple simple. En utilisant de manière flexible la mise en page élastique CSS Flex, une mise en page Web plus complexe peut être obtenue. J'espère que cet article vous sera utile.

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!