Savybė align-content

Savybė align-content nustato elementų lygiavimą išilgai skersinės ašies flex blokams ir vertikalia ašimi gardų (grid) atveju. Taikoma tėviniam elementui.

Sintaksė

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

Reikšmės

Pavyzdys . Reikšmė flex-start

Šiame pavyzdyje ašis, pagal kurią vyksta lygiavimas, nukreipta iš viršaus į apačią, t.y. ji yra skersinė. Kaip matyti iš gauto rezultato, visi mūsų elementai prispausiami prie jos viršutinės dalies:

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;
}

Результат:

Pavyzdys . Reikšmė flex-end

Šiame pavyzdyje blokai prispausiami prie apatinės skersinės ašies pusės, kadangi savybė align-content nustatyta reikšme flex-end:

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;
}

Результат:

Pavyzdys . Reikšmė center

Dabar blokai išlygiuoti skersinės ašies centre:

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;
}

Результат:

Lygiavimas vertikalios ašies pradžioje garde (grid)

Nustatykime elementų lygiavimą garde (grid) vertikalios ašies pradžioje:

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;
}

Результат:

Lygiavimas vertikalios ašies centre garde (grid)

Dabar nustatykime elementų lygiavimą vertikalios ašies centre:

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;
}

Результат:

Lygiavimas vertikalios ašies pabaigoje garde (grid)

Nustatykime elementų lygiavimą vertikalios ašies pabaigoje:

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;
}

Результат:

Taip pat žiūrėkite