Uratibu wa Vipengele vya Flex kwenye Mhimili Mkuu katika CSS

Sifa justify-content inaruhusu kuratibu vipengele kwenye mhimili mkuu. Tayari umeshapita maadili center, space-between, space-around, space-evenly. Hebu sasa tujifunze maadili mengine kadhaa.

Thamani flex-start inasukuma vipengele mwanzo wa mhimili mkuu, na thamani flex-end - mwisho. Hebu tuangalie kwa mifano.

Mfano

Tuelekeze mhimili mkuu kutoka kushoto kwenda kulia, kwa kutoa sifa flex-direction thamani row. Tusukume vizuizi mwanzo wa mhimili. Kwa hili justify-content weka kwa thamani flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* mhimili mkuu kutoka kushoto kwenda kulia */
  justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Hebu sasa tusukume vizuizi mwisho wa mhimili. Kwa hili justify-content weka kwa thamani flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* mhimili mkuu kutoka kushoto kwenda kulia */
  justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Tuelekeze sasa mhimili mkuu kutoka kulia kwenda kushoto, kwa kutoa sifa flex-direction thamani row-reverse. Tusukume vizuizi mwanzo wa mhimili, yaani kwenye ukingo wa kulia. Kwa hili justify-content weka kwa thamani flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* mhimili mkuu kutoka kulia kwenda kushoto */
  justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Sasa hebu tusukume vizuizi mwisho wa mhimili mkuu, yaani kwenye ukingo wa kushoto. Kwa hili justify-content weka kwa thamani flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* mhimili mkuu kutoka kulia kwenda kushoto */
  justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Katika mifano iliyopita mhimili mkuu ulikuwa umeelekezwa usawa. Hebu sasa tubadilishe mwelekeo wake na kuuelekeza wima.

Tuelekeze mhimili mkuu chini, kwa kutoa sifa flex-direction thamani column.

Tusukume vizuizi mwanzo wa mhimili mkuu, yaani kuwenye ukingo wa juu. Kwa hili justify-content weka kwa thamani flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* mhimili mkuu kutoka juu kwenda chini */
  justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Hebu sasa tusukume vizuizi mwisho wa mhimili mkuu, yaani kwenye ukingo wa chini. Kwa hili justify-content weka kwa thamani flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* mhimili mkuu kutoka juu kwenda chini */
  justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Tubadilishe mwelekeo wa mhimili mkuu, tukiuelekeza kutoka chini kwenda juu. Kwa hili sifa flex-direction toa thamani column-reverse. Katika hali hii vizuizi vitabadilisha mpangilio wao - mwanzo wa mhimili utakuwa na kizuizi cha mwisho katika HTML kificho.

Hebu tusukume vizuizi mwanzo wa mhimili mkuu, yaani kwenye ukingo wa chini. Kwa hili justify-content weka kwa thamani flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* mhimili mkuu kutoka chini kwenda juu */
  justify-content: flex-start; /* vizuizi mwanzo wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Mfano

Hebu tusukume vizuizi mwisho wa mhimili mkuu, yaani kwenye ukingo wa juu. Kwa hili justify-content weka kwa thamani flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* mhimili mkuu kutoka chini kwenda juu */
  justify-content: flex-end; /* vizuizi mwisho wa mhimili mkuu */
}

Matokeo ya utekelezaji wa kificho:

Kazi za Vitendo