Die Eigenschaft place-content

Die Eigenschaft place-content legt die Ausrichtung von Elementen entlang der Haupt- und Querachse für Flex-Elemente sowie entlang der horizontalen und vertikalen Achse für Grids fest. Der erste Wert gibt die Ausrichtung entlang der Haupt- (horizontalen) Achse an, der zweite Wert - entlang der Quer- (vertikalen) Achse. Die Eigenschaft wird auf das übergeordnete Element angewendet.

Syntax

Selektor {
	place-content: Hauptachse Querachse;
}

Beispiel . Ausrichtung am Anfang der Haupt- und in der Mitte der Querachse

Derzeit sind die Elemente am oberen Teil der Hauptachse ausgerichtet und befinden sich gleichzeitig in der Mitte der Querachse:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	place-content: start center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung in der Mitte der Haupt- und am Ende der Querachse

Und jetzt sind die Elemente in der Mitte der Hauptachse und am Ende der Querachse positioniert:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	place-content: center end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung am Ende der Haupt- und am Anfang der Querachse

Hier sind die Elemente am unteren Teil der Hauptachse und gleichzeitig am Anfang der Querachse ausgerichtet:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	place-content: end start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung am Anfang der vertikalen und am Ende der horizontalen Achse im Grid

Lassen Sie uns unsere Elemente am Anfang der vertikalen und am Ende der horizontalen Achse ausrichten:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	place-content: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung in der Mitte der vertikalen und am Anfang der horizontalen Achse im Grid

Lassen Sie uns unsere Elemente in der Mitte der vertikalen und am Anfang der horizontalen Achse ausrichten:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	place-content: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung am Ende der vertikalen und am Anfang der horizontalen Achse im Grid

Lassen Sie uns unsere Elemente am Ende der vertikalen und am Anfang der horizontalen Achse ausrichten:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	place-content: end start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Siehe auch

die Eigenschaft align-content,
die die Ausrichtung entlang der Quer- oder vertikalen Achse festlegt
die Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse festlegt