Compréhension de la dernière mise en page flexible en HTML

Chaque fois que nous créons la page frontale, nous utiliserons certains attributs tels que float, position, margin, etc. Ces attributs sont un peu difficiles à utiliser et le navigateur consommera beaucoup de performances lors du rendu

Alors aujourd'hui, nous allons parler de la dernière disposition flexible, également appelée disposition élastique !

Il convient de noter que n'importe quel conteneur peut être désigné comme disposition flexible, mais float, clear et vertical-align seront tous invalides dans la disposition flexible.

Direction de l'axe principal

Le conteneur flexible est divisé en axe x et axe y. La direction positive de l'axe x est par défaut de gauche à droite et la direction positive de l'axe y. -axis par défaut de haut en bas.

Définir un conteneur comme affichage de disposition flexible :flex; la direction par défaut de l'axe principal est de gauche à droite

Si nous voulons changer la direction par défaut de flex, nous devons utiliser ; l'attribut flex-direction flex-Direction a quatre valeurs d'attribut, à savoir row, row-reverse, column et column-reverse, qui vont de gauche à droite, de droite à gauche, de haut en bas et de bas en haut !

Alignement dans la direction de l'axe principal

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

Alignement vertical sur une seule ligne !

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

Retour à la ligne de sous-éléments

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

Alignement vertical multi-ligne !

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

Ceux ci-dessus sont tous les attributs ajoutés à l'élément parent

Certains attributs des sous-éléments

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

Les trois attributs ci-dessus peuvent être abrégés, tels que flex : 1, 1,1 sont dans l'ordre ci-dessus

S'il y a des erreurs, corrigez-moi et travaillons dur ensemble !

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!