Hordhac ku saabsan `justify-content`

Sifada justify-content ee Flexbox waxa loo isticmaalaa in lagu hagaajiyo sida walxaha flex-ka loo qaybiyo iyadoo loo eegayo jihada weyn ee weelka flex-ka. Waxay xakamaynaysaa booska bannaan ee u dhexeeya iyo ku wareegsan walxaha.

Qiimaha ay qaadan karto `justify-content`

• flex-start: Walxaha ayaa loo hagaajiyaa bilowga xariiqda. Kani waa qiimaha caadiga ah.
• flex-end: Walxaha ayaa loo hagaajiyaa dhamaadka xariiqda.
• center: Walxaha ayaa loo hagaajiyaa bartamaha xariiqda.
• space-between: Walxaha ugu horreeya waxa loo hagaajiyaa bilowga xariiqda, kan ugu dambeeyana dhamaadka. Booska haray waxa loo qaybiyaa si siman inta u dhexeysa walxaha.
• space-around: Boos siman ayaa la saaraa labada dhinac ee walxaha oo dhan.
• space-evenly: Boos siman ayaa la saaraa inta u dhexeysa walxaha oo dhan, oo ay ku jiraan bilowga iyo dhamaadka weelka.

Tusaale 1: `justify-content: flex-start;`

<div class="container" style="display: flex; justify-content: flex-start;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Tusaalahan, walxaha flex-ka waxa loo hagaajin doonaa bilowga weelka flex-ka.

Tusaale 2: `justify-content: center;`

<div class="container" style="display: flex; justify-content: center;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Tusaalahan, walxaha flex-ka waxa loo hagaajin doonaa bartamaha weelka flex-ka.

Tusaale 3: `justify-content: space-between;`

<div class="container" style="display: flex; justify-content: space-between;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Tusaalahan, walxaha ugu horreeya iyo kan ugu dambeeya waxa loo hagaajin doonaa bilowga iyo dhamaadka, booskuna waxa loo qaybin doonaa inta u dhexeysa.

Tusaale 4: `justify-content: space-around;`

<div class="container" style="display: flex; justify-content: space-around;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Tusaalahan, boos siman ayaa la saari doonaa ku wareegsan walxaha oo dhan.

Isticmaalka `justify-content` oo la socda `flex-direction`

Sifada justify-content waxay si fiican ula shaqaysaa sifada flex-direction. Haddii flex-direction loo dejiyo column, justify-content waxay xakamayn doontaa sida walxaha loo hagaajiyo iyadoo loo eegayo dhidibka toosan.