Sifa align-content

Sifa align-content huweka upangaji wa vipengee kwenye mhimili wa kupita kwa vitalu vya flex na kwenye mhimili wima kwa gridi. Inatumika kwa kipengele kizazi.

Syntax

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

Thamani

Thamani	Maelezo
`flex-start`	Vitalu vimesukumwa kwenye mwanzo wa mhimili wa kupita (wima).
`flex-end`	Vitalu vimesukumwa kwenye mwisho wa mhimili wa kupita (wima).
`center`	Vitalu vimesimama katikati ya mhimili wa kupita (wima).
`space-between`	Vitalu vimesambazwa kwenye mhimili wa kupita (wima), lakini kipengele cha kwanza kimesukumwa kwenye mwanzo wa mhimili, na cha mwisho - kwenye mwisho.
`space-around`	Vitalu vimesambazwa kwenye mhimili wa kupita (wima), lakini kati ya kizuizi cha kwanza na mwanzo wa mhimili, kizuizi cha mwisho na mwisho wa mhimili kuna pengo sawa, kama kati ya vitalu vingine. Hata hivyo, hazilingani, kama inavyoweza kuonekana: mafungu yanaongezwa na kati ya vitalu viwili umbali ni mara mbili kubwa kuliko kati ya kizuizi na mwanzo/mwisho wa mhimili.

Mfano . Thamani flex-start

Katika mfano huu, mhimili, ambao upangaji unafanywa unaongozwa kutoka juu hadi chini, yaani ni wa kupita. Kama inavyoonekana kutoka kwa matokeo yaliyopatikana, vipengele vyetu vyote vimesukumwa kwenye sehemu yake ya juu:

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

Результат:

Mfano . Thamani flex-end

Katika mfano huu, vitalu vimesukumwa kwenye upande wa chini wa mhimili wa kupita, kwa sababu sifa align-content imewekwa kwa thamani 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;
}

Результат:

Mfano . Thamani center

Sasa vitalu vimepangwa katikati ya mhimili wa kupita:

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

Результат:

Kuweka sawa kwenye mwanzo wa mhimili wima kwenye gridi

Wacha tuweke upangaji kwa vipengele vyetu kwenye gridi kwenye mwanzo wa mhimili wima:

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

Результат:

Kuweka sawa katikati ya mhimili wima kwenye gridi

Na sasa wacha tuweke upangaji wa vipengele katikati ya mhimili wima:

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

Результат:

Kuweka sawa kwenye mwisho wa mhimili wima kwenye gridi

Wacha tuweke upangaji wa vipengele kwenye mwisho wa mhimili wima:

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

Результат:

Angalia pia

sifa flex-direction,
ambayo huweka mwelekeo wa shoka za vitalu vya flex
sifa justify-content,
ambayo huweka upangaji kwenye mhimili kuu
sifa align-items,
ambayo huweka upangaji kwenye mhimili wa kupita
sifa flex-wrap,
ambayo huweka mistari mingi ya vitalu vya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
ambayo huweka mpangilio wa vitalu vya flex
sifa align-self,
ambayo huweka upangaji wa kizuizi kimoja
sifa place-content,
ambayo huweka upangaji kwenye shoka kuu na za kupita