Disposition flexible du mini programme WeChat

Programme WeChat MiniLa mise en page adopte la Flex mise en page.
FlexLayout est une nouvelle solution proposée par W3c en 2009, qui peut implémenter diverses mises en page de manière simple, complète et réactive.
La mise en page Flex fournit des éléments dans des conteneurs, l'alignement, la direction et l'ordre. même ils peuvent être dynamiques ou de taille indéfinie.
La principale caractéristique de la mise en page Flex est la possibilité d'ajuster ses éléments enfants pour remplir l'espace approprié de la manière la plus appropriée sur différentes tailles d'écran.

Disposition flexible

Caractéristiques de la disposition Flex :

• Étirez-vous dans n'importe quelle direction, gauche, droite, bas, haut

• Vous pouvez modifier et réorganiser l'ordre dans le calque de style

• L'axe principal et l'axe transversal sont pratiques pour la configuration

• étirement de l'espace et remplissage des éléments enfants

• alignés le long du conteneur

implémentations de l'applet WeChat

mise en page. Présentons brièvement l'utilisation de la mise en page Flex dans l'applet WeChat Flex

Conteneur télescopique

a <a href="." cn target="_blank">display<p>:flex</p></a> ou <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex est un display:block (conteneur flexible), à ​​l'intérieur Les sous-éléments de flex container sont appelés flex item (éléments flexibles) et les sous-éléments de flex container sont tous disposés en utilisant Flex

• , qui est désigné comme mode conteneur de bloc interne Toujours. commencez à afficher avec une nouvelle ligne. Les conteneurs display:blockview (view, scroll-view et swiper) de l'applet WeChat sont tous dispaly:block

par défaut > : mode conteneur en ligne pour afficher les éléments enfants sur une seule ligne. Vous pouvez utiliser l'attribut

• display:flex pour spécifier s'il doit être renvoyé à la ligne. flex-wrap a trois valeurs : nowrap (pas de retour à la ligne). ,flex-wrapwrap (line wrap),wrap-reverse (la première ligne de wrap est en dessous)Code utilisant (valeur par défaut) :
  display:blockEffet d'affichage :

  <view class="flex-row" style="display: block;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>

bloc

est remplacé par l'effet d'affichage de

 :

display:flex

flex

Vous pouvez voir la différence entre

et

à partir du rendu L'élément enfant <.> est affiché dans une nouvelle ligne (

) ou en ligne (block). Le conteneur flexible de la disposition flexviewaxe principal et axe transversal blockflex

peut être disposé dans n’importe quelle direction. Le conteneur

a deux axes par défaut :

axe principal (

axe principalFlex)
et axe transversal (axe transversal) . La position de départ de l' axe principal est (début principal), la position finale de l'axe principal est (principal fin
) et la longueur de l'axe principal est 主轴起点(taille principale). 主轴终点De même, le point de départ de l'axe transversal est (début croisé), la position finale est (fin croisée) et la longueur est 主轴长度(taille de la croix). Voir l'image ci-dessous pour plus de détails :
侧轴起点侧轴终点侧轴长度

Flex-direction

Remarque, et Il n'est pas nécessaire qu'il soit

De même,

n'a pas besoin d'être
La direction de l'axe principal est contrôlée par l'attribut 主轴. 🎜>从左到右侧轴从上到下flex-direction : La direction horizontale de gauche à droite est l'axe principal

• row : La direction horizontale de droite à gauche est l'axe principal

• row-reverse : La direction verticale de haut en bas est l'axe principal

• columnLa direction verticale de bas en haut se trouve l'axe principal

• Si la direction horizontale est l'axe principal, cette direction verticale est l'axe transversal, et vice versa. column-reverseRendu de quatre paramètres de direction de broche :

Exemple d'image

L'exemple dans la figure montre l'utilisation de différents différence dans le sens de disposition des valeurs
.

Exemple de code :

Effet de fonctionnement : flex-direction

flex-direction

Alignement

Il existe deux méthodes d'alignement pour les éléments enfants :

just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-conent Définir l'alignement des éléments enfants sur l'axe principal
align-items Définir l'alignement des éléments enfants sur l'axe latéral

justify-contentIl existe 5 alignements optionnels :

• flex-start Alignement du point de départ de la broche (valeur par défaut)

• flex-end Alignement du point final de la broche

• center Aligné au centre sur l'axe principal

• space-between Aligné aux deux extrémités, sauf que les éléments enfants aux deux extrémités sont appuyés contre les conteneurs aux deux extrémités, les intervalles entre les autres éléments enfants sont tous égaux

• space-around La distance entre chaque élément enfant est égale et la distance entre les éléments enfants aux deux extrémités du conteneur est également la même que la distance entre autres éléments enfants. L'alignement de
  justify-content est lié à la direction de l'axe principal, dans la figure ci-dessous, flex-direction est utilisé comme row, le mode de l'axe principal est 从左到右 et la description est . <a href="http://www.php.%20cn/wiki/48.html" target="_blank">js<code><a href="http://www.php.cn/wiki/48.html" target="_blank">js</a>tify-contenttify-content Effet d'affichage de 5 valeurs :
  

  
  

  justify-content

align-items représente l'alignement sur l'axe transversal :

• stretch remplit tout le conteneur (valeur par défaut)

• flex-start Alignement du point de départ de l'axe latéral

• flex-end Alignement du point final de l'axe latéral

• center Aligné au centre dans l'axe transversal

• baseline Aligner avec la première ligne de texte de l'élément enfant

align-tiemsL'alignement du paramètre est lié à la direction de l'axe transversal, flex-direction. est row, la direction de l'axe transversal est 从上到下 et l'effet d'affichage des cinq valeurs de align-items est décrit :

aign-items

Avec la direction de l'axe principal et de l'axe latéral et en définissant leur alignement, la plupart des mises en page peuvent être réalisées.

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!