Hordhac ku saabsan `flex-direction`

Sifada flex-direction ee CSS waxay xakamaysaa jihada ay ku beegmaan xubnaha flexbox. Waxay qeexaysaa haddii xubnaha flex ay ku beegmaan saf ama tiir.

Qiimaha `flex-direction`

Waxaa jira afar qiime oo waaweyn oo loo isticmaali karo flex-direction:

• row: (qiimaha caadiga ah) Xubnaha flex waxay ku beegmaan saf.
• row-reverse: Xubnaha flex waxay ku beegmaan saf, laakiin si gadaal ah.
• column: Xubnaha flex waxay ku beegmaan tiir.
• column-reverse: Xubnaha flex waxay ku beegmaan tiir, laakiin si gadaal ah.

Tusaale 1: `flex-direction: row;`

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-direction: row; /* Qiimaha caadiga ah */
}
.item {
  width: 100px;
  height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  margin: 5px;
}

Tusaalahan, xubnaha .item waxay ku beegmaan saf.

Tusaale 2: `flex-direction: column;`

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}
.item {
  width: 100px;
  height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  margin: 5px;
}

Halkan, xubnaha .item waxay ku beegmaan tiir.

Tusaale 3: `flex-direction: row-reverse;`

.container {
  display: flex;
  flex-direction: row-reverse;
}

Tusaalahan, xubnaha waxay ku beegmaan saf, laakiin siday u kala horeeyaan waa la rogay.

Tusaale 4: `flex-direction: column-reverse;`

.container {
  display: flex;
  flex-direction: column-reverse;
}

Halkan, xubnaha waxay ku beegmaan tiir, laakiin siday u kala horeeyaan waa la rogay.

Isticmaalka Dhabta ah

flex-direction waxaa loo isticmaali karaa in lagu abuuro layouts kala duwan, sida navigation menus toosan ama jiif ah, ama si loo rogo siday xubnaha u kala horeeyaan iyadoo ku xiran cabbirka shaashadda adoo isticmaalaya media queries.