Dans notre processus de développement et de conception de pages Web frontales, la mise en page est une partie très importante. 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. Dans ce chapitre, nous vous présentons un modèle de mise en page CSS3 : le modèle de boîte flexible (flex box), afin que vous puissiez comprendre ce qu'est une boîte flexible en CSS3, ainsi que la différence et l'utilisation des valeurs d'attribut flex et box de l'attribut display dans la zone flex. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1 : Qu'est-ce qu'une boîte souple
CSS3 Flexible Box (Flexible Box ou flexbox) est une méthode de mise en page qui garantit que les éléments ont un comportement approprié lorsque la page doit s'adapter à différentes tailles d'écran et types d'appareils. Le but de l'introduction du modèle de disposition flexbox est de fournir un moyen plus efficace d'organiser, d'aligner et d'attribuer un espace vide aux sous-éléments d'un conteneur. De nombreux besoins d’aménagement complexes courants peuvent être satisfaits de manière simple. 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.
2 : Contenu de la boîte flexible CSS3
La boîte flexible est composée d'un conteneur flexible (Flex conteneur) et d'un sous-élément flexible (Flex item).
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 flexible contient un ou plusieurs sous-éléments flexibles.
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.
3 : La différence et l'utilisation entre display:box et display:flex
1 display:box contrôle principalement la disposition, l'ordre et la verticalité des éléments enfants dans le conteneur parent. L'alignement (horizontal)
display:box est une syntaxe antérieure à 2009 et est obsolète. Vous devez ajouter le préfixe correspondant pour l'utiliser.
Le code de compatibilité est donc à peu près le suivant
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex;Copier après la connexion
Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子--display: box;</title>
<style>
.box {
width: 330px;
height: 400px;
border: 1px #000 solid;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}
.box p {
width: 100px;
height: 20px;
background: #000;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
</html>Copier après la connexion
Rendu :
Après avoir déclaré un attribut de boîte télescopique display:box sur l'élément parent, cela signifie que les éléments de bloc dans la boîte entière sont transformés en éléments en ligne, puis les éléments enfants de l'élément parent peuvent se voir attribuer librement de l'espace, au lieu que chaque élément de bloc occupe sa propre ligne, ils négocient pour être disposés ensemble sur une seule ligne. Par exemple, dans l'exemple ci-dessus, les trois balises p du div seront affichées sur une seule ligne au lieu d'être distribuées hiérarchiquement.
Deux : display:flex permet principalement de diviser le conteneur enfant selon certaines règles en fonction de la largeur du conteneur parent
display:flex est apparu après 2011, et sera également le syntaxe standard à l'avenir. La plupart des nouveaux navigateurs n'ont pratiquement plus besoin d'utiliser de préfixes. Actuellement, seuls les navigateurs Apple devraient avoir des préfixes Webkit, et les autres peuvent s'afficher normalement.
La nouvelle version définit l'attribut d'affichage de la boîte télescopique comme suit :
display:flex; Afficher le modèle de boîte conteneur sous forme de boîte élastique au niveau bloc (nouvelle version)
display:inline-flex; Afficher le modèle de boîte de conteneur sous forme de boîte élastique de niveau en ligne (nouvelle version)
Utilisation :
Tout d'abord, l'utilisation de flex nécessite un conteneur parent, il y a plusieurs éléments dans le conteneur parent
Conteneur parent : conteneur
Attributs :
display:flex;/*flex block level, inline-. flex : inline fast */
justify-content:space-around;/*center : centré horizontalement, flex-start : vers la gauche ; flex-end : vers la droite entre les deux ; côtés, divisés également au milieu ; espace autour : répartition parfaite et uniforme*/
aligner les éléments : étirer ;/*centre : centre vertical, flex-start : vers le haut, flex-end : vers le bas, espace-entre, espace-autour*/
flex-direction : rangée ;/*la colonne est disposée de haut en bas, colonne-inverse, rangée : de gauche à droite, rangée-inverse : de droite à gauche */
flex-wrap:wrap;/*wrap affichage multiligne (lorsque le conteneur parent n'est pas suffisant pour afficher, de haut en bas), nowrap (lorsque le conteneur n'est pas assez large, l'enfant les éléments diviseront également la largeur ou la hauteur du conteneur parent), wrap -reverse : de bas en haut*/
/*flex-flow est l'abréviation de flex-direction et flex-wrap*/
Par exemple :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子--display:flex;</title>
<style>
.container{
width:600px;
height:400px;
border:1px solid #000;
display:flex;/*flex块级，inline-flex:行内快*/
justify-content:space-around;
align-items:stretch;
flex-direction: row;
flex-wrap:wrap;
/*flex-flow是flex-direction、flex-wrap的缩写*/
}
.box{
width:200px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div>
<div>这是中间的box1</div>
<div>这是中间的box2</div>
</div>
</body>
</html>Copier après la connexion
Rendu :
Notez qu'après le réglage sur la disposition Flex, le flotteur, clair et vertical Les attributs -align des éléments enfants ne seront pas valides.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
