Atrybut place-items w CSS

Poprzednia strona place-content
Następna strona place-self

Definicja i użycie

Atrybut place-items nie jest odpowiedni dla układu flexbox. Dlatego, jeśli używasz Atrybut używany do układu siatki, jest skrótem dla następujących atrybutów:

align-items
Atrybut

Jeśli atrybut place-items ma dwie wartości:

place-items: start center;

Wartość atrybutu align-items to 'start'
Wartość atrybutu justify-items to 'center'

Jeśli atrybut place-items ma tylko jedną wartość:

#container {

jeśli wartość atrybutów align-items i justify-items ustawiona jest na 'end'

Przykład

Przykład 1

Gdy atrybut writing-mode ustawiony jest na 'vertical-rl', koniec kierunku blokowego przenosi się z dołu na lewo, koniec kierunku wierszowego przenosi się z prawego na dół:
  Umieszczenie każdego elementu <div> w początku kierunku wierszowego i blokowego jego komórki siatki:
}

Spróbuj sam

place-items: start;

Przykład 2: Sposób pisania Kiedy kontener siatki writing-mode

Gdy atrybut writing-mode ustawiony jest na 'vertical-rl', koniec kierunku blokowego przenosi się z dołu na lewo, koniec kierunku wierszowego przenosi się z prawego na dół:
  #container {
  place-items: end;
}

Spróbuj sam

writing-mode: vertical-rl;

Atrybut Przykład 3: Układ flexbox Atrybut place-items nie jest odpowiedni dla układu flexbox. Dlatego, jeśli używasz place-itemsAtrybut Wartość (tj. druga wartość) zostanie zignorowana.

#wrapper {
  place-items: stretch end;
}

Spróbuj sam

Gramatyka CSS

place-items: normal legacy|value|initial|inherit;

Wartość atrybutu

Wartość	Opis
normal legacy	Domyślnie. Domyślna wartość place-items elementu. Domyślna wartość align-items to 'normal', domyślna wartość justify-items to 'legacy'.
baseline	Lokalizacja elementu na bazie kontenera.
center	Wyśrodkowanie elementu do środka komórki siatki.
end	Wyśrodkowanie elementu do końca komórki siatki.
start	Wyśrodkowanie elementu do początku komórki siatki.
stretch	Jeśli nie ustawiono rozmiaru elementu siatki, rozciąga element siatki, aby wypełnić kontener siatki.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dochodzi do tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	normal legacy
Inherencja:	Nie
Tworzenie animacji:	Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Język JavaScript:	object.style.placeItems="stretch center"