La mise en page est une partie très importante de la conception du style des applications Web. La mise en page est utilisée pour déterminer la taille et la position des différents composants et éléments sur la page. Avec la popularité des interfaces utilisateur réactives, les applications Web doivent généralement s'adapter à différentes tailles d'appareils et résolutions de navigateur. L’aspect le plus important de la conception d’une interface utilisateur réactive est la mise en page. La disposition doit être ajustée en fonction de la taille de la fenêtre, modifiant ainsi la taille et la position des composants pour obtenir le meilleur effet d'affichage. Cela rend également la logique de mise en page plus complexe.
Cet article présente le nouveau modèle de mise en page introduit dans la spécification CSS3 : le modèle flex box. Le modèle flexbox peut répondre de manière simple à de nombreux besoins de mise en page complexes courants. Son avantage est que les développeurs déclarent uniquement le comportement que doit avoir la mise en page, sans donner de méthodes d'implémentation spécifiques. Le navigateur est responsable de la mise en page proprement dite. Ce modèle de mise en page est pris en charge dans les principaux navigateurs.
Contenu flexible de la boîte CSS3
Flexible La box est composée d'un conteneur Flex et d'un article Flex.
Un conteneur flexible est défini comme un conteneur flexible en définissant la valeur de la propriété display sur flex ou inline-flex.
Un conteneur flex contient un ou plusieurs éléments enfants flex.
Remarque : L'extérieur du conteneur flexible et l'intérieur du sous-élément flexible sont rendus normalement. La zone flex définit uniquement la façon dont les éléments enfants flex sont disposés dans le conteneur flex.
Les éléments enfants flexibles sont généralement affichés dans une rangée dans la flexbox. Par défaut, il n'y a qu'une seule ligne par conteneur.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 150px;
background-color: yellow;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"> 1</div>
<div class="flex-item"> 2</div>
<div class="flex-item"> 3</div>
</div>
</body>
</html>propriété flex-direction
Définit ou récupère les éléments enfants du flex objet box La position dans le conteneur parent.
Syntaxe
flex-direction : ligne | ligne-colonne inversée
ligne : disposée horizontalement de gauche à droite (alignée à gauche), la méthode de disposition par défaut.
ligne-inverse : inversez la disposition horizontale (alignée à droite, de l'arrière vers l'avant, avec le dernier élément à l'avant.
colonne : disposition verticale.
row-reverse : inversez la disposition verticale, de l'arrière vers l'avant, avec le dernier élément en haut
Supports du navigateur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>justify-content. L'attribut
définit ou récupère l'alignement de l'élément flexbox dans la direction de l'axe principal (axe horizontal). Cette propriété contrôle également l'alignement lorsqu'un élément déborde d'une ligne.Syntaxe
justify-content : flex-start | flex-end center | 🎜>
flex-end : L'élément flex box sera aligné sur la fin de la ligne. Le bord de l’extrémité principale du premier élément enfant de la ligne sera aligné avec le bord de l’extrémité principale de la ligne, et tous les éléments flexibles suivants seront alignés avec leur élément précédent.
center : L’élément flex box sera aligné au milieu de la ligne. Les éléments enfants de la ligne seront alignés les uns sur les autres et centrés dans la ligne, le premier élément ayant autant de marge par rapport à la position de début principale de la ligne que le dernier élément en a par rapport à la position de fin principale de la ligne (si l'espace restant est négatif, alors le débordement de longueurs égales aux deux extrémités est maintenu).
espace entre : les éléments Flexbox seront répartis uniformément dans les lignes. Si l'espace restant le plus à gauche est négatif ou si la ligne n'a qu'un seul enfant, cette valeur est équivalente à « flex-start ». Dans d'autres cas, la marge du premier élément est alignée avec la marge de début principale de la ligne, tandis que la marge du dernier élément est alignée avec la marge de fin principale de la ligne, et les éléments flexibles restants sont répartis uniformément. Assurez-vous qu'il y a un espace blanc égal entre les éléments flexibles restants. deux.
espace autour : les éléments de la boîte flexible seront répartis uniformément dans la rangée, laissant la moitié de l'espace entre les sous-éléments aux deux extrémités. Si l'espace restant le plus à gauche est négatif ou s'il n'y a qu'un seul élément flexbox dans la ligne, cette valeur est équivalente à « centre ». Dans d'autres cas, les éléments de la boîte flexible sont régulièrement espacés, avec un espace blanc égal entre eux, la moitié de l'espace avant le premier élément et après le dernier élément étant la moitié de l'espace entre eux.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>propriété align-items
Définir ou récupérer l'élément flexbox sur la croix axe Alignement dans la direction (axe vertical).Syntaxe
align-items : flex-start | flex-end baseline | stretch
flex-start : La limite de la position de départ de l'axe transversal (axe vertical) de l'élément flex box est proche de la limite de départ de l'axe transversal de la rangée.
flex-end : La limite de la position de départ de l'axe transversal (axe vertical) de l'élément flex box est proche de la limite finale de l'axe transversal de la ligne.
center : L'élément flexbox est centré sur l'axe transversal (axe vertical) de la ligne. (Si la taille de la ligne est inférieure à la taille de l'élément flexbox, elle débordera de la même longueur dans les deux sens).
ligne de base : si l'axe en ligne et l'axe transversal de l'élément flex box sont les mêmes, cette valeur est équivalente à 'flex-start'. Sinon, cette valeur participera à l’alignement de la ligne de base.
stretch : Si la valeur de l'attribut spécifiant la taille de l'axe transversal est "auto", sa valeur rendra la taille de la zone de marge de l'élément aussi proche que possible de la taille de la ligne, mais en même temps elle sera conforme avec 'min/max-width/height' 'Restrictions d'attribut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}
</style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>propriété flex-wrap
Définit ou récupère les éléments enfants du flex objet box S'il faut envelopper en cas de dépassement du conteneur parent.
Syntaxe
flex-wrap : nowrap wrap | >
nowrap : Ne pas envelopper lorsque l'élément enfant déborde du conteneur parent.
wrap : enveloppe automatiquement lorsque l'élément enfant déborde du conteneur parent.
wrap-reverse : inversez la disposition des enveloppes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>attribut align-content
Définit ou récupère l'alignement des lignes flexibles de la pile flexbox .Syntaxe
align-content : flex-start | flex-end center space- | between | space-around | stretch
flex-start : chaque ligne est empilée vers la position de départ du conteneur flex box. Le bord de départ de l’axe transversal de la première ligne du conteneur flexbox est adjacent au bord de départ de l’axe transversal du conteneur flexbox, et chaque ligne suivante est adjacente à la ligne précédente.
flex-end : chaque rangée est empilée vers l'extrémité du conteneur flex box. La limite d'extrémité de l'axe transversal de la dernière ligne du conteneur flexbox est proche de la limite d'extrémité de l'axe transversal du conteneur flexbox, et chaque ligne suivante est proche de la ligne précédente.
centre : chaque ligne est empilée vers le milieu du conteneur flexbox. Les lignes sont alignées deux par deux et centrées dans le conteneur flexible, en maintenant la distance entre le bord du contenu de départ de l'axe transversal du conteneur flexible et la première ligne et la distance entre le bord du contenu de fin de l'axe transversal du conteneur et la dernière ligne. la distance est égale. (Si l'espace restant est négatif, les lignes s'étendront sur une distance égale dans les deux sens.)
espace entre les deux : les lignes sont réparties uniformément dans le conteneur flexbox. Si l'espace restant est négatif ou s'il n'y a qu'une seule ligne dans le conteneur flex, cette valeur est équivalente à « flex-start ». Dans d'autres cas, le bord de début de l'axe transversal de la première ligne est contre le bord de contenu de début croisé du conteneur flexible, le bord de fin de l'axe transversal de la dernière ligne est contre le bord de contenu d'extrémité transversale du conteneur flexible et les lignes restantes sont disposées en la fenêtre flexbox de telle manière que l’espace entre elles soit égal.
espace autour : chaque ligne est répartie uniformément dans le conteneur flexbox, laissant la moitié de l'espace entre les sous-éléments aux deux extrémités. Si l'espace restant est négatif ou s'il n'y a qu'une seule ligne dans le conteneur flexbox, cette valeur est équivalente à « center ». Dans d'autres cas, les lignes sont disposées dans le conteneur flexbox de manière à ce que l'espace entre elles soit égal et que l'espace avant la première ligne et après la dernière ligne soit la moitié de l'espace des autres lignes.
étirement : chaque rangée s'étirera pour occuper l'espace restant. Si l'espace restant est négatif, cette valeur est équivalente à « flex-start ». Dans d'autres cas, l'espace restant est réparti de manière égale entre toutes les lignes pour augmenter leur taille transversale.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-direction:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>propriété order
Définit ou récupère l'occurrence des éléments enfants de la flexbox ordre des objets du modèle.
Syntaxe
ordre : <integer>
<integer> : utilisez des valeurs entières pour définir l'ordre de tri, les valeurs les plus petites étant répertoriées en premier. Peut être négatif.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>attribut align-self
Définit ou récupère l'élément flexbox lui-même sur le côté Alignement le long de l’axe (axe vertical).
Syntaxe
alignement automatique : démarrage flexible | étirement de la ligne de base |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-align-items: flex-end;
height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2){
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3){
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4){
-webkit-align-self: baseline;
align-self: baseline;
padding:20px 10px;
}
.box li:nth-child(5){
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6){
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7){
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</body>
</html>attribut flex
attribut composé. Définit ou récupère la manière dont les éléments enfants de l’objet flex box allouent de l’espace.
Syntaxe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
max-width:400px;height:100px;margin:10px 0 0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{background:#aaa;text-align:center;}
.box li:nth-child(1){background:#999;}
.box li:nth-child(2){background:#aaa;}
.box li:nth-child(3){background:#ccc;}
#box li:nth-child(1){-webkit-flex:1;flex:1;}
#box li:nth-child(2){-webkit-flex:1;flex:1;}
#box li:nth-child(3){-webkit-flex:1;flex:1;}
#box2 li:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
#box2 li:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
#box2 li:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
#box3{max-width: 800px;}
#box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
#box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
#box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}
</style>
</head>
<body>
<ul id="box" class="box">
<li>flex:1;</li>
<li>flex:1;</li>
<li>flex:1;</li>
</ul>
<ul id="box2" class="box">
<li>flex:1 0 100px;</li>
<li>flex:2 0 100px;</li>
<li>flex:3 0 100px;</li>
</ul>
<ul id="box3" class="box">
<li>flex:1 1 400px;</li>
<li>flex:1 2 400px;</li>
<li>flex:1 2 400px;</li>
</ul>
</body>
</html>