place-content

Die place-content CSS Kurzschreibweise ermöglicht es Ihnen, Inhalte sowohl entlang der Block- als auch der Inline-Richtung gleichzeitig zu auszurichten (d.h. die align-content und justify-content Eigenschaften) in einem entsprechenden Layoutsystem wie Grid oder Flexbox.

Probieren Sie es aus

Bestandteile der Eigenschaft

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css

/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/* Global values */
place-content: inherit;
place-content: initial;
place-content: revert;
place-content: revert-layer;
place-content: unset;

Der erste Wert ist der Wert der align-content Eigenschaft, der zweite derjenige der justify-content.

Hinweis: Wenn der zweite Wert nicht vorhanden ist, wird der erste Wert für beide verwendet, vorausgesetzt, es ist ein gültiger Wert für beide. Wenn er für eine oder die andere ungültig ist, wird der gesamte Wert ungültig sein.

Werte

start: Die Elemente sind bündig aneinander gepackt zur Startkante des Ausrichtungscontainers in der entsprechenden Achse.
end: Die Elemente sind bündig aneinander gepackt zur Endkante des Ausrichtungscontainers in der entsprechenden Achse.
flex-start: Die Elemente sind bündig aneinander gepackt zur Kante des Ausrichtungscontainers, abhängig von der Hauptstart- oder Querstart-Seite des Flexcontainers. Dies gilt nur für Elemente in einem Flex-Layout. Bei Elementen, die keine Kinder eines Flexcontainers sind, wird dieser Wert wie start behandelt.
flex-end: Die Elemente sind bündig aneinander gepackt zur Kante des Ausrichtungscontainers, abhängig von der Hauptend- oder Querend-Seite des Flexcontainers. Dies gilt nur für Elemente in einem Flex-Layout. Bei Elementen, die keine Kinder eines Flexcontainers sind, wird dieser Wert wie end behandelt.
center: Die Elemente sind bündig aneinander gepackt zur Mitte des Ausrichtungscontainers.
left: Die Elemente sind bündig aneinander gepackt zur linken Kante des Ausrichtungscontainers. Wenn die Achse der Eigenschaft nicht mit der Inline-Achse parallel ist, verhält sich dieser Wert wie start.
right: Die Elemente sind bündig aneinander gepackt zur rechten Kante des Ausrichtungscontainers in der entsprechenden Achse. Wenn die Achse der Eigenschaft nicht mit der Inline-Achse parallel ist, verhält sich dieser Wert wie start.
space-between: Die Elemente sind gleichmäßig im Ausrichtungscontainer verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Das erste Element ist bündig mit der Hauptstartkante, das letzte Element ist bündig mit der Hauptendkante.
baseline, first baseline, last baseline: Gibt die Teilnahme an der ersten oder letzten Baseline-Ausrichtung an: richtet die Ausrichtungsbaseline des ersten oder letzten Baselinesatzes des Kastens mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baselinesatz aller Kästen in seiner Baseline-Teilhabergruppe aus. Die Ersatz-Ausrichtung für first baseline ist start, die für last baseline ist end.
space-around: Die Elemente sind gleichmäßig im Ausrichtungscontainer verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Abstands zwischen jedem Paar benachbarter Elemente.
space-evenly: Die Elemente sind gleichmäßig im Ausrichtungscontainer verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, der Hauptstartkante und dem ersten Element sowie der Hauptendkante und dem letzten Element ist überall genau gleich.
stretch: Wenn die kombinierte Größe der Elemente kleiner ist als die Größe des Ausrichtungscontainers, haben alle auto-größen Elemente eine gleichmäßig (nicht proportional) vergrößerte Größe, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen eingehalten werden, sodass die kombinierte Größe genau den Ausrichtungscontainer füllt.
safe: Zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Wenn das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überläuft und Datenverlust verursacht, wird das Element stattdessen so ausgerichtet, als ob der Ausrichtungsmodus start wäre.
unsafe: Zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und unabhängig davon, ob ein Überlauf, der Datenverlust verursacht, auftreten könnte, wird der angegebene Ausrichtungswert eingehalten.

Formale Definition

Initialer Wert	wie die jeweiligen Kurzschreibweisen: `align-content`: `normal` `justify-content`: `normal`
Anwendbar auf	mehrzeilige flexible Container
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `align-content`: wie angegeben `justify-content`: wie angegeben
Animationstyp	diskret

Formale Syntax

place-content = 
  <'align-content'> <'justify-content'>?  

<align-content> = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<justify-content> = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

Beispiele

Platzieren von Inhalten in einem Flex-Container

HTML

html

<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

<code>writing-mode:</code
><select id="writingMode">
  <option value="horizontal-tb" selected>horizontal-tb</option>
  <option value="vertical-rl">vertical-rl</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="sideways-rl">sideways-rl</option>
  <option value="sideways-lr">sideways-lr</option></select
><code>;</code><br />

<code>direction:</code
><select id="direction">
  <option value="ltr" selected>ltr</option>
  <option value="rtl">rtl</option></select
><code>;</code><br />

<code>place-content:</code
><select id="alignContentAlignment">
  <option value="normal">normal</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="baseline">baseline</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" selected>space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option>
</select>
<select id="justifyContentAlignment">
  <option value="normal">normal</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center" selected>center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option></select
><code>;</code>

function update() {
  document.getElementById("container").style.placeContent =
    `${document.getElementById("alignContentAlignment").value} ` +
    `${document.getElementById("justifyContentAlignment").value}`;
}

const alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

const justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

const writingM = document.getElementById("writingMode");
writingM.addEventListener("change", (evt) => {
  document.getElementById("container").style.writingMode = evt.target.value;
});

const direction = document.getElementById("direction");
direction.addEventListener("change", (evt) => {
  document.getElementById("container").style.direction = evt.target.value;
});

CSS

css

#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /* Can be changed in the live sample */
  direction: ltr; /* Can be changed in the live sample */
  place-content: flex-end center; /* Can be changed in the live sample */
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}

Ergebnis

Spezifikationen

Specification
CSS Box Alignment Module Level 3 # place-content

Browser-Kompatibilität

BCD tables only load in the browser