Lorsque nous développons des applets WeChat, nous devons essentiellement mettre en page la page. Il existe de nombreuses méthodes de mise en page. La mise en page flex peut fondamentalement résoudre tous nos besoins et est simple et facile à apprendre.
Flex est l'abréviation de Flexible Box, qui signifie «disposition flexible», qui est utilisée pour offrir une flexibilité maximale aux modèles de boîtes.
Le cœur de la disposition flexible se trouve dans le conteneur. Il y a deux axes par défaut, l'un est l'axe principal horizontal et l'autre est l'axe transversal vertical, supportant l'ensemble du conteneur.
Tout conteneur peut être désigné comme une mise en page flexible.
.body {
display: flex;
}
De cette façon, nous définissons la disposition de type flex du conteneur.
Les attributs importants de la disposition flex sont:
- flex-direction
- flex-wrap
- flex-flow
- justifier le contenu
- align-items
- align-content
propriété flex-direction
La direction de flex détermine la direction de l'axe principal.
Il existe quatre valeurs sélectionnables:
- row (par défaut): l'axe principal est horizontal et le point de départ est à l'extrémité gauche.
- row-reverse: l'axe principal est dans la direction horizontale et le point de départ est à l'extrémité droite.
- colonne: l'axe principal est dans la direction verticale et le point de départ est sur le bord supérieur.
- Colonne inversée: l'axe principal est dans la direction verticale et le point de départ est sur le bord inférieur.
Nous écrivons un cas d'utilisation simple:
<view class="body">
<view></view>
<view></view>
</view>
.body > view {
background-color: red;
width: 100rpx;
height: 100rpx;
margin: 20rpx;
}
Nous avons simplement écrit deux vues et leur avons défini la largeur, la hauteur et la couleur d'arrière-plan pour nous permettre de voir l'effet. Nous n'avons effectué aucune opération de mise en page sur la vue parente, son effet par défaut est donc le suivant:
parce que la vue est un élément de bloc, donc sans surprise, les deux vues sont sur une ligne distincte, disposées l'une au-dessus de l'autre.
Ensuite, nous ajoutons le code suivant à la vue parent dans WXSS:
.body {
display: flex;
flex-direction: row;
}
Maintenant, regardons à nouveau l'effet: les
deux vues sont dans la même ligne et disposées à gauche et à droite. Parce que nous définissons flex-direction: ligne, ligne signifie disposition horizontale, donc l'effet réel est en ligne avec nos résultats théoriques.
attributs flex-wrap
flex-wrap est le cas où une ligne du conteneur n'est pas alignée et doit être enveloppée. Les
valeurs sélectionnables sont les suivantes:
- Nowrap
- emballage
- Lorsque wrap-reverse
n'est pas défini, par défaut, la valeur de flex-warp est nowarp.
Démontrons avec du code:
<view class="body">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
</view>
.body {
display: flex;
flex-direction: row;
}
.body > view {
width: 100rpx;
height: 100rpx;
background-color: red;
margin: 20rpx;
font-size: 50rpx;
}
C'est l'effet sans aucun réglage:
On peut voir que ces vues ont été déformées, et la largeur n'est pas de 100rpx, car par défaut, la valeur de flex-warp est nowarp, donc il est très obéissant et ne peut être serré que sans emballage.
Ensuite, nous définissons la valeur de flex-warp sur warp, et examinons l'effet: on
peut voir que lorsque la largeur de la position restante dans une ligne est inférieure à 100rpx, il effectue un saut de ligne, qui est l'effet de flex-warp: chaîne.
Ensuite, jetons un coup d'œil à l'effet du wrap-reverse:
nous pouvons voir que la vue a été enveloppée et que les lignes sont disposées à l'envers, ce qui correspond à nos attentes.
propriétés flex-flow
L'attribut flex-flow est une combinaison de flex-direction et flex-wrap. S'il n'est pas défini, la valeur par défaut est row nowarp.
Expliquons brièvement:
le contenu de WXML reste inchangé. Dans WXSS, seule la valeur de flex-flow est définie pour la vue parente. Voyons l'effet.
.body {
display: flex;
flex-flow: row wrap;
}
.body > view {
width: 100rpx;
height: 100rpx;
background-color: red;
margin:20rpx;
font-size: 50rpx;
}
L'effet de page est comme prévu, l'orientation est paysage et la ligne est enveloppée.
attribut justify-content
Justify-content consiste à définir l'alignement du contenu du conteneur sur l'axe principal.
Ses valeurs couramment utilisées sont:
- flex-start (par défaut): justifié à gauche
- flex-end: aligner à droite
- centre: centré
- espace entre: justifié aux deux extrémités, l'espace entre les éléments est égal.
- Espace autour: L'espace des deux côtés de chaque élément est égal. Par conséquent, l'intervalle entre les éléments est deux fois plus grand que l'intervalle entre les éléments et la bordure.
Démontrons brièvement avec le code:
flex-start:
<view class="body">
你好啊
</view>
.body {
display: flex;
justify-content: flex-start;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
flex-end:
centre ：
espace entre ：
<view class="body">
<text>你好啊</text>
<text>我爱你</text>
</view>
.body {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
espace-autour:
tout dans nos attentes théoriques.
attribut align-items
align-items consiste à définir la façon dont le contenu du conteneur est aligné sur l'axe transversal vertical.
Ses valeurs couramment utilisées sont:
- flex-start: aligner le point de départ de l'axe transversal
- flex-end: aligner l'extrémité de l'axe transversal
- centre: alignez le milieu de l'axe transversal
- ligne de base: l'alignement de ligne de base de la première ligne de texte du projet
- stretch (valeur par défaut): si l'élément n'est pas défini sur hauteur ou sur auto, il occupera la hauteur de tout le conteneur
. Les trois premières valeurs sont principalement utilisées ici.
Effet code et démo:
flex-start:
<view class="body">
我爱你
</view>
.body {
display: flex;
align-items: flex-start;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
extrémité flexible ：
centre:
attribut align-content
align-content consiste à définir l'alignement de plusieurs axes. S'il n'y a qu'un seul axe, la propriété entière ne fonctionnera pas.
Ses valeurs couramment utilisées sont:
-
flex-start: aligner avec le point de départ de l'axe transversal.
-
flex-end: aligner avec l'extrémité de l'axe transversal.
-
center: aligner avec le milieu de l'axe transversal.
-
Espace entre: alignez les deux extrémités de l'axe transversal et l'espace entre les axes est uniformément réparti.
-
Espace autour: les intervalles des deux côtés de chaque axe sont égaux. Par conséquent, l'intervalle entre les axes est deux fois plus grand que l'intervalle entre les axes et le cadre.
-
étirer (par défaut): l'axe occupe tout l'axe transversal.
Code et effet de démonstration:
stretch (par défaut):
<view class="body">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
</view>
.body {
display: flex;
flex-flow: row wrap;
height: 800rpx;
align-content: stretch;
background-color: greenyellow;
}
.body > view {
width: 100rpx;
height: 120rpx;
font-size: 50rpx;
background-color: red;
margin: 20rpx;
}
flex-start ：
flex-end:
center:
space-between:
space-around:
flex est une méthode de mise en page très simple et facile à utiliser. Vous pouvez combiner et utiliser efficacement plusieurs de ses propriétés pour compléter la mise en page quotidienne.
Si vous avez des questions sur l'applet WeChat, veuillez contacter QQ: 505417246.
Suivez le compte officiel WeChat ci-dessous, et vous pourrez recevoir l'applet WeChat, Vue, TypeScript, front-end, uni-app, pile complète, Nodejs et autres apprentissages pratiques matériaux
