Sifa place-content

Sifa place-content inaweka mpangilio wa vipengele kwenye mihimili kuu na ya pembeni kwa vipengele vya flex, na kwenye mihimili ya usawa na wima kwa gridi. Thamani ya kwanza inaonyesha mpangilio kwenye mhimili kuu (usawa), thamani ya pili - mhimili wa pembeni (wima). Sifa inatumika kwa kipengele kizazi.

Kisarufi

csskichaguli {
  place-content: mhimili_kuu mhimili_pembeni;
}

Mfano . Kupangilia kwenye mwanzo wa mhimili kuu na katikati ya mhimili wa pembeni

Kwa sasa vipengele vimesukumwa kwenye sehemu ya juu ya mhimili kuu na wakati huo huo viko katikati ya mhimili wa pembeni:

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

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

Результат:

Mfano . Kupangilia katikati ya mhimili kuu na mwisho wa mhimili wa pembeni

Na sasa vipengele vimepangiliwa katikati ya mhimili kuu na mwishoni mwa mhimili wa pembeni:

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

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

Результат:

Mfano . Kupangilia mwisho wa mhimili kuu na mwanzo wa mhimili wa pembeni

Hapa vipengele vimesukumwa kwenye sehemu ya chini ya mhimili kuu na wakati huo huo kwenye mwanzo wa mhimili wa pembeni:

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

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

Результат:

Mfano . Kupangilia kwenye mwanzo wa mhimili wima na mwisho wa mhimili usawa kwenye gridi

Wacha tupange vipengele vyetu kwenye mwanzo wa mhimili wima na mwisho wa mhimili usawa:

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

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

Результат:

Mfano . Kupangilia katikati ya mhimili wima na mwanzo wa mhimili usawa kwenye gridi

Wacha tupange vipengele vyetu katikati ya mhimili wima na mwanzo wa mhimili usawa:

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

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

Результат:

Mfano . Kupangilia mwisho wa mhimili wima na mwanzo wa mhimili usawa kwenye gridi

Wacha tupange vipengele vyetu mwishoni mwa mhimili wima na mwanzo wa mhimili usawa:

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

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

Результат:

Angalia pia