Ausführliche Erläuterung der Verwendung von CSS Flex

1 Sie können Flex verwenden, um ein P anzuordnen und es horizontal und vertikal in einem anderen P zu zentrieren 🎜>

Zum Beispiel: HTML-Code:

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

	</p>
	</p>

CSS-Code:

.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;

ps: Auf diese Weise können Sie es horizontal zentrieren und vertikal

2. Attribute von Flex

<p class="items">
	<p class="item">1</p>
	<p class="item">23</p>
	<p class="item">4</p>
	</p>

Es gibt sechs Attribute, die auf Elemente geschrieben werden können:

•flex -direction

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

Es gibt 6 Elemente, die sein können auf Artikel geschrieben:

•order//Dies ist der separat angegebene Artikel. Wenn Sie die Reihenfolge dieses Artikels ändern möchten, geben Sie diesem Artikel dieses Attribut an

•flex-grow
•flex -shrink
•flex-basis
•flex
•align-self

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von CSS Flex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!