Az align-content tulajdonság

A align-content tulajdonság az elemek igazítását határozza meg a keresztirányú tengely mentén flex tárolók esetén és a függőleges tengely mentén grid tárolók esetén. A szülő elemre vonatkozik.

Szintaxis

cssszelektor {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Értékek

Érték	Leírás
`flex-start`	A blokkok a keresztirányú (függőleges) tengely elejéhez igazódnak.
`flex-end`	A blokkok a keresztirányú (függőleges) tengely végéhez igazódnak.
`center`	A blokkok a keresztirányú (függőleges) tengely középpontjához igazódnak.
`space-between`	A blokkok egyenletesen oszlanak el a keresztirányú (függőleges) tengely mentén, úgy, hogy az első elem a tengely elejéhez, az utolsó pedig a végéhez igazódik.
`space-around`	A blokkok egyenletesen oszlanak el a keresztirányú (függőleges) tengely mentén, úgy, hogy az első blokk és a tengely eleje között, valamint az utolsó blokk és a tengely vége között ugyanakkora a térköz, mint a többi blokk között. Azonban ezek nem egyenlőek, ahogy az első pillanatban tűnhet: a térközök összeadódnak, így két blokk között két times nagyobb a távolság, mint egy blokk és a tengely eleje/vége között.

Példa . flex-start érték

Ebben a példában a tengely, mentén amely az igazítás történik, fentről lefelé irányul, azaz keresztirányú. Ahogy az eredményből is látszik, minden elemünk annak felső részéhez igazódik:

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

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Példa . flex-end érték

Ebben a példában a blokkok a keresztirányú tengely alsó oldalához igazódnak, mivel a align-content tulajdonság flex-end értékre van állítva:

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

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Példa . center érték

Most a blokkok a keresztirányú tengely középpontjához igazódnak:

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

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Igazítás a függőleges tengely elejéhez gridben

Állítsuk be az elemek igazítását a gridben a függőleges tengely elejéhez:

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

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

Результат:

Igazítás a függőleges tengely középpontjához gridben

Most pedig állítsuk be az elemek igazítását a függőleges tengely középpontjához:

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

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

Результат:

Igazítás a függőleges tengely végéhez gridben

Állítsuk be az elemek igazítását a függőleges tengely végéhez:

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

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

Результат:

Lásd még

a flex-direction tulajdonság,
amely a flex tárolók tengelyeinek irányát határozza meg
a justify-content tulajdonság,
amely a főtengely menti igazítást határozza meg
a align-items tulajdonság,
amely a keresztirányú tengely menti igazítást határozza meg
a flex-wrap tulajdonság,
amely a flex tárolók többsoros voltát határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap tulajdonságokra
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egyetlen blokk igazítását határozza meg
a place-content tulajdonság,
amely a fő- és keresztirányú tengelyek menti igazítást határozza meg