Programme WeChat Mini - Qu'est-ce que Flex Layout ?

Flex est l'abréviation de Flexible Box, qui signifie « disposition flexible » et est utilisée pour offrir une flexibilité maximale pour les modèles en forme de boîte. [Tutoriel recommandé : Tutoriel de développement de mini-programmes]

N'importe quel conteneur peut être désigné comme mise en page Flex.

.box{ display: flex; }

Les éléments en ligne peuvent également utiliser la mise en page Flex.

.box{ display: inline-flex; }

Les navigateurs dotés du noyau Webkit doivent ajouter le préfixe -webkit.

.box{ display: -webkit-flex; /* Safari */ display: flex; }

Notez qu'après avoir défini la disposition Flex, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.

Concepts de base Flex
Les éléments qui utilisent la disposition Flex sont appelés conteneurs Flex (conteneurs flexibles), ou « conteneurs » en abrégé. Tous ses éléments enfants deviennent automatiquement des membres de conteneur, appelés éléments Flex (éléments flexibles) ou « éléments » en abrégé.

Le conteneur a deux axes par défaut : l'axe principal horizontal (axe principal) et l'axe transversal vertical (axe transversal). La position de départ de l'axe principal (l'intersection avec la bordure) est appelée début principal, et la position finale est appelée fin principale ; la position de départ de l'axe transversal est appelée début croisé et la position finale est appelée fin croisée.

Les éléments sont disposés le long de l'axe principal par défaut. L'espace de l'axe principal occupé par un seul projet est appelé taille principale, et l'espace de l'axe transversal occupé par un seul élément est appelé taille transversale.

Propriétés du conteneur

 flex-direction : La propriété détermine la direction de l'axe principal (c'est-à-dire la direction de la disposition des éléments). (Gauche, milieu, droite, haut, milieu, bas)

 flex-wrap : définition de l'attribut, si une ligne d'axe ne peut pas être disposée, comment envelopper la ligne.

 flex-flow : La forme courte de l'attribut flex-direction et de l'attribut flex-wrap, la valeur par défaut est row nowrap

 justifier-content : L'attribut définit l'alignement de l'élément sur l'axe principal. (Gauche, centre, droite)

 align-items : La propriété définit la façon dont les éléments sont alignés sur l'axe transversal. (Haut, milieu et bas)

 align-content : L'attribut définit l'alignement de plusieurs axes. Cette propriété n'a aucun effet si le projet ne comporte qu'un seul axe.

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!