Sifa flex-direction

Sifa flex-direction inaweka mwelekeo wa mhimili mkuu na mhimili wa pili au, kwa kusema kwa maneno mengine, huweka vipengele kwa safu mlalo au safu wima.

Inatumika kwa kipengele kizazi cha vikundi vya flex. Imojumuishwa katika sifa iliyofupishwa flex-flow.

Kiendeshaji

csskichaguzi {
  flex-direction: row | row-reverse | column | column-reverse;
}

Thamani

Thamani ya msingi: row.

Mfano

Vipengele vimewekwa kwa safu mlalo, kwa urekebisho wa msingi vimegandamizwa kwenye upande wa kushoto, nambari zao zina mpangilio wa kawaida - kutoka kushoto kwenda kulia:

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

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Mfano . Thamani row-reverse

Vipengele vimewekwa kwa safu mlalo, kwa urekebisho wa msingi vimegandamizwa kwenye upande wa kulia, nambari zao zina mpangilio wa kinyume - kutoka kulia kwenda kushoto:

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

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Mfano . Thamani column

Vipengele vimewekwa kwa safu wima, kwa urekebisho wa msingi vimegandamizwa kwenye sehemu ya juu, nambari zao zina mpangilio wa kawaida - kutoka juu kwenda chini:

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

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Mfano . Thamani column-reverse

Vipengele vimewekwa kwa safu wima, kwa urekebisho wa msingi vimegandamizwa kwenye sehemu ya chini, nambari zao zina mpangilio wa kinyume - kutoka chini kwenda juu:

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

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Angalia pia