Maison > interface Web > tutoriel CSS > Explication détaillée des utilisations de CSS Flex

Explication détaillée des utilisations de CSS Flex

Guanhui
Libérer: 2020-07-18 17:47:51
avant
2714 Les gens l'ont consulté

Explication détaillée des utilisations de CSS Flex

1 Vous pouvez utiliser flex pour disposer un p et le centrer horizontalement et verticalement à l'intérieur d'un autre p<.>

Par exemple : code html :


<p class="container">
	<p class="box">

	</p>
	</p>
Copier après la connexion

code css :


.container{
	width:600px;
	height:400px;
	border:1px solid blue;
	display: flex;
	justify-content:center;
	align-items:center;
	}
	.box{
	width:200px;
	height:100px;
	border:1px red solid;
Copier après la connexion

ps : De cette façon vous pouvez le centrer horizontalement et verticalement

2. Attributs de flex

<p class="items">
	<p class="item">1</p>
	<p class="item">23</p>
	<p class="item">4</p>
	</p>
Copier après la connexion

Il y a six attributs qui peuvent être écrits sur les éléments :

•flex -direction

•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content

Il y a 6 éléments qui peuvent être écrit sur les éléments :

•order//Ceci est l'élément donné séparément Si vous souhaitez modifier l'ordre de cet élément, donnez cet attribut à cet élément

•flex-grow
•flex. -rétrécir
•flex-base
•flex
•align-self

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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal