CSS align-items ominaisuus

Määritelmä ja käyttö

align-items ominaisuuksia määrittääksesi joustavien konttien sisällä olevien projektien oletusasento.

Vinkki:Käytä jokaisen projektin align-self ominaisuudet korvata tämän alignItems-ominaisuuden.

Katso myös:

CSS -opetus:CSS Grid

CSS -opetus:CSS Flexbox

CSS -viittausopas:align-content-ominaisuus

CSS -viittausopas:align-self-ominaisuus

CSS -viittausopas:justify-content-ominaisuus

CSS -viittausopas:justify-items-ominaisuus

CSS -viittausopas:justify-self-ominaisuus

HTML DOM -viittausopas:alignItems-ominaisuus

Esimerkki

Täytä kaikkien joustavien <div>-elementtien sijoittelu keskelle:

div {
  display: flex;
  align-items: center;
}

Kokeile itse

CSS-kieli

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
stretch Oletus. Objekti venytetään sopimaan konttorin koko.
center Objekti sijaitsee konttorin keskellä.
flex-start Objekti sijaitsee konttorin alupäässä.
flex-end Objekti sijaitsee konttorin päätepisteessä.
baseline Objekti sijoitetaan konttorin tasoon.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: stretch
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatioon liittyvät ominaisuudet.
Versio: CSS3
JavaScript-kieli: object.style.alignItems="center"

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0