Atrybut place-content w CSS

Poprzednia strona perspective-origin
Następna strona place-items

Definicja i użycie

place-content Właściwości te są używane w układzie flexbox i grid, są skrótem dla poniższych właściwości:

align-content
justify-content

Jeśli właściwość place-content ma dwie wartości:

place-content: start center;

Wartość właściwości align-content wynosi 'start'
Wartość właściwości justify-content wynosi 'center'

Jeśli właściwość place-content ma tylko jedną wartość:

place-content: end;

Wartości właściwości align-content i justify-content są ustawione na 'end'

Przykład

Przykład 1

Ustawianie elastyczności w dolnej części kontenera elastycznego, a także równomierne rozstawienie elementów w kierunku poziomym:

#container {
  display: flex;
  place-content: end space-between;
}

Spróbuj sam

Przykład 2: układ siatkowy

Dodatkowa przestrzeń w kierunku blokowym jest równomiernie rozłożona wokół każdego elementu siatki, a elementy siatki są wyśrodkowane w kierunku wierszowym：

#container {
  display: grid;
  place-content: space-around center;
}

Spróbuj sam

CSS syntax

place-content: normal|value|initial|inherit;

Wartość atrybutu

Wartość	Opis
normal	Domyślna wartość. Zależy od kontekstu układu. Równoważne temu, że nie ustawiono wartości dla align-content i justify-content.
stretch	Siatka: Jeśli projekt siatkowy nie ma ustawionego rozmiaru, rozciąga się, aby wypełnić kontener siatkowy. Elastyczny box: Jeśli projekt elastyczny nie ma określonego rozmiaru w osi przekroju, rozciąga się w osi przekroju, aby wypełnić kontener elastyczny.
start	Wyrównuje projekty do początku kontenera.
end	Wyrównuje projekty do końca kontenera.
center	Wyrównuje projekty do środka kontenera.
space-between	Równomiernie rozkłada dostępną przestrzeń na dwóch osiach kontenera, aby między projektami była równa przestrzeń.
space-around	Równomiernie rozkłada dostępną przestrzeń na dwóch osiach kontenera, aby każdy projekt miał równą przestrzeń wokół siebie.
space-evenly	Równomiernie rozkłada projekty na dwóch osiach kontenera.
overflow-alignment	'safe'：Jeśli zawartość wylewa się, projekt jest wyrównywany do 'start'. 'unsafe'：Niezależnie od tego, czy zawartość projektu wylewa się, wartości wyrównania pozostają bez zmian.
initial	Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial。
inherit	Przypisuje tę właściwość do wartości domyślnej. Zobacz: inherit。

Techniczne szczegóły

Domyślna wartość：	normal
Inheredność：	Nie
Tworzenie animacji：	Nie obsługuje. Zobacz:Atrybuty animacji。
Wersja：	CSS3
JavaScript syntax：	object.style.placeContent="end space-around"