Sifa align-items

Sifa align-items inabainisha mpangilio wa vipengele kwenye mhimili wa kuvuka kwa vizuizi vya flex na kwenye mhimili wima kwa gridi. Inatumika kwa kipengele cha mzazi.

Syntax

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

Thamani

Thamani chaguomsingi: stretch.

Mfano . Thamani stretch

Hivi sasa mhimili kuu unaelekezwa kutoka kushoto kwenda kulia, na kwenye mhimili wa kuvuka vipengele vimetambaswa kwa urefu wote:

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

Результат:

Mfano . Thamani stretch + vipimo vya kipengele

Hivi sasa kwa vipengele umewekwa upana na urefu, kwa hivyo thamani stretch kwa sifa align-items itapuuzwa:

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

Результат:

Mfano . Thamani flex-start bila vipimo vya kipengele

Hivi sasa vipengele vitasukumwa juu:

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

Результат:

Mfano . Thamani flex-start + vipimo vya kipengele

Hivi sasa vipengele bado vitasukumwa juu, hata hivyo vitakuwa na upana uliowekwa na urefu:

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

Результат:

Mfano . Thamani flex-end + vipimo vya kipengele

Hivi sasa vipengele vitasukumwa chini:

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

Результат:

Mfano . Thamani center + vipimo vya kipengele

Hivi sasa vipengele vitasimama katikati kwenye mhimili wa kuvuka (kwa kesi hii kwa wima):

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

Результат:

Mfano . Thamani center, vipengele vya ukubwa tofauti

Hivi sasa vipengele vina ukubwa tofauti kwa urefu (hivi sasa vinapanuliwa na maandishi, lakini inaweza kuwekwa height), upana kwa kila mmoja ni sawa, kwa kuwa sifa width imewekwa:

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

Результат:

Mfano . Thamani baseline, vipengele vya ukubwa tofauti

Na hivi ndivyo inavyoonekana mpangilio kulingana na mstari wa msingi:

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

Результат:

Mfano . Kupangilia kwenye mwanzo wa mhimili wima kwenye gridi

Wacha tupangilie vipengele vyetu ndani ya seli kwenye mwanzo wa mhimili wima:

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

Результат:

Na sasa tuangalie gridi yetu kwenye kipimo cha kivinjari:

Mfano . Kupangilia katikati ya mhimili wima kwenye gridi

Na sasa tuwapangilie vipengele vyetu kwenye seli katikati ya mhimili wima:

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

Результат:

Wacha tuangalie onyesho la gridi kwenye kipimo:

Mfano . Kupangilia kwenye mwisho wa mhimili wima kwenye gridi

Tubadilishe tena mpangilio wa vipengele, wakati huu kwenye mwisho wa mhimili wima:

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

Результат:

Na sasa tuangalie jinsi inavyoonekana gridi yetu kupitia kipimo:

Angalia pia