Ominaisuus align-items

Ominaisuus align-items asettaa elementtien kohdistuksen poikittaistakselia pitkin flex-lohkoille ja pystytasossa grid-elementeille. Sovelletaan vanhempaelementtiin.

Syntaksi

cssvalitsija {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Arvot

Oletusarvo: stretch.

Esimerkki . Arvo stretch

Nyt päätasokuva on suunnattu vasemmalta oikealle, ja poikittaistakselia pitkin elementit venyvät koko korkeuteen:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo stretch + elementin koot

Nyt elementeille on asetettu leveys ja korkeus, joten arvoa stretch ominaisuudelle align-items ei huomioida:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo flex-start ilman elementin kokoa

Nyt elementit painuvat ylös:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo flex-start + elementin koot

Nyt elementit edelleen painuvat ylös, mutta niillä on asetettu leveys ja korkeus:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo flex-end + elementin koot

Nyt elementit painuvat alas:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo center + elementin koot

Nyt elementit sijaitsevat keskellä poikittaistakselia (tässä tapauksessa pystysuunnassa):

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo center, elementit eri kokoisia

Nyt elementeillä on eri korkeus (ne venyvät tekstin mukaan, mutta voitaisiin asettaa myös height), leveys on kaikilla sama, koska ominaisuus width on asetettu:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

Esimerkki . Arvo baseline, elementit eri kokoisia

Näin perusviivan mukainen kohdistus näyttää:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

Esimerkki . Kohdistus pystyakselin alkuun gridissä

Kohdistetaan elementtimme solujen sisällä pystyakselin alkuun:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: flex-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;
}

Результат:

Katsotaan nyt gridiämme selaimen debuggerissa:

Esimerkki . Kohdistus pystyakselin keskelle gridissä

Kohdistetaan nyt elementtimme solujen sisällä pystyakselin keskelle:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: center;
  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;
}

Результат:

Katsotaan gridin näkymää debuggerissa:

Esimerkki . Kohdistus pystyakselin loppuun gridissä

Muutetaan taas elementtien kohdistusta, tällä kertaa pystyakselin loppuun:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: 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;
}
#elem1 {
  
}

Результат:

Katsotaan miltä gridimme näyttää debuggerin kautta:

Katso myös