Explication détaillée de l'utilisation et des effets de chaque attribut dans la disposition élastique CSS Flex

Explication détaillée de l'utilisation et des effets de chaque attribut dans CSS Flex Flexible Layout

Dans le développement Web, la mise en page flexible (Flexbox) est devenue une méthode de mise en page couramment utilisée. Il peut résoudre efficacement le problème de l'alignement et de la disposition des éléments dans le conteneur, afin que les pages Web puissent présenter de bons effets sur différentes tailles d'écran. Cet article expliquera en détail l'utilisation et les effets de chaque attribut dans la mise en page élastique CSS Flex.

1. attribut flex-direction

L'attribut flex-direction est utilisé pour définir la direction de l'axe principal dans le conteneur flexible. L'axe principal fait référence à la direction horizontale ou verticale dans un conteneur flexible. L'attribut flex-direction a quatre valeurs facultatives : row, row-reverse, column et column-reverse.

1. row : Valeur par défaut, l'axe principal est horizontal et les sous-éléments sont disposés horizontalement.
2. row-reverse : L'axe principal est horizontal et les sous-éléments sont disposés horizontalement dans l'ordre inverse.
3. colonne : L'axe principal est vertical et les sous-éléments sont disposés verticalement.
4. column-reverse : L'axe principal est vertical et les sous-éléments sont disposés verticalement dans l'ordre inverse.

Exemple de code :

.container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向，子元素水平排列 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 主轴为水平方向，子元素水平反向排列 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 主轴为垂直方向，子元素垂直排列 */
}

.container-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 主轴为垂直方向，子元素垂直反向排列 */
}

2. Attribut Justify-content

L'attribut justify-content est utilisé pour définir l'alignement des sous-éléments dans le conteneur élastique sur l'axe principal. Il comporte cinq valeurs facultatives : flex-start, flex-end, center, space-between et space-around.

1. flex-start : Les éléments enfants sont alignés au point de départ de l'axe principal.
2. flex-end : les éléments enfants sont alignés à la fin de l'axe principal.
3. centre : les éléments enfants sont alignés au centre de l'axe principal.
4. espace entre : les éléments enfants sont répartis uniformément sur l'axe principal, sans espace entre le début et la fin.
5. espace autour : les éléments enfants sont répartis uniformément sur l'axe principal, avec des espaces au début et à la fin.

Exemple de code :

.container {
  display: flex;
  justify-content: flex-start; /* 子元素在主轴起点对齐 */
}

.container-end {
  display: flex;
  justify-content: flex-end; /* 子元素在主轴终点对齐 */
}

.container-center {
  display: flex;
  justify-content: center; /* 子元素在主轴中心对齐 */
}

.container-between {
  display: flex;
  justify-content: space-between; /* 子元素在主轴上均匀分布，首尾没有间隔 */
}

.container-around {
  display: flex;
  justify-content: space-around; /* 子元素在主轴上均匀分布，首尾有间隔 */
}

3. Attribut align-items

L'attribut align-items est utilisé pour définir l'alignement des éléments enfants dans le conteneur élastique sur l'axe transversal. L'axe transversal est l'axe perpendiculaire à l'axe principal. L'attribut align-items a cinq valeurs facultatives : flex-start, flex-end, center, baseline et stretch.

1. flex-start : les éléments enfants sont alignés au point de départ de l'axe transversal.
2. flex-end : les éléments enfants sont alignés à la fin de l'axe transversal.
3. centre : les éléments enfants sont alignés au centre de l'axe transversal.
4. baseline : les éléments enfants sont alignés sur la ligne de base.
5. stretch : L'élément enfant s'étire pour remplir tout l'axe transversal.

Exemple de code :

.container {
  display: flex;
  align-items: flex-start; /* 子元素在交叉轴起点对齐 */
}

.container-end {
  display: flex;
  align-items: flex-end; /* 子元素在交叉轴终点对齐 */
}

.container-center {
  display: flex;
  align-items: center; /* 子元素在交叉轴中心对齐 */
}

.container-baseline {
  display: flex;
  align-items: baseline; /* 子元素以基线对齐 */
}

.container-stretch {
  display: flex;
  align-items: stretch; /* 子元素拉伸填满整个交叉轴 */
}

4. Attribut flex-grow

L'attribut flex-grow est utilisé pour définir la façon dont les éléments enfants du conteneur flexible allouent l'espace restant. Il spécifie le taux d'agrandissement de l'élément enfant, qui est par défaut 0.

Exemple de code :

.item {
  flex-grow: 1; /* 子元素1放大比例为1 */
}

.item2 {
  flex-grow: 2; /* 子元素2放大比例为2 */
}

propriété flex-shrink

La propriété flex-shrink est utilisée pour définir la façon dont les éléments enfants d'un conteneur flex rétrécissent lorsque l'espace est insuffisant. Il spécifie le taux de retrait des éléments enfants, qui est par défaut de 1.

Exemple de code :

.item {
  flex-shrink: 1; /* 子元素1收缩比例为1 */
}

.item2 {
  flex-shrink: 2; /* 子元素2收缩比例为2 */
}

Résumé :

Cet article explique en détail l'utilisation et les effets de chaque attribut dans la mise en page élastique CSS Flex, y compris flex-direction, justification-content, align-items, flex-grow et flex-shrink , etc. propriété. En maîtrisant l'utilisation de ces attributs, nous pouvons disposer de manière flexible les sous-éléments dans le conteneur flexible pour obtenir divers effets de mise en page. 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!