Hordhac ku saabsan `flex-shrink`

`flex-shrink` waa sifo CSS ah oo qeexaysa awoodda ay sheyga flex-ka ku yaraan karo haddii ay lagama maarmaan noqoto. Waxay go'aamisaa sida ay sheyga u nuugi doonto booska bannaan ee ku jira weelka flex-ka marka booska ku filan uusan jirin.

Qiimaha `flex-shrink`

Sifada `flex-shrink` waxay qaadataa qiime lambar ah. Qiimaha caadiga ah waa 1, taasoo macnaheedu yahay in dhammaan sheyada flex-ka ay si siman u yaraan doonaan haddii loo baahdo. Haddii aad u dejiso qiime 0, sheyga flex-ka ma yaraan doono.

Tusaale 1: Isticmaalka Qiimaha Caadiga ah (1)

Tusaalahan, waxaan ku tusaynaa sida `flex-shrink: 1` (qiimaha caadiga ah) u saameynayo sheyada flex-ka marka boosku yaraado.

<div class="flex-container">
  <div class="flex-item" style="width: 200px;">Item 1</div>
  <div class="flex-item" style="width: 200px;">Item 2</div>
  <div class="flex-item" style="width: 200px;">Item 3</div>
</div>

.flex-container {
  display: flex;
  width: 500px; /* Ka yar wadarta ballacyada sheyada */
  border: 1px solid black;
}
.flex-item {
flex-shrink: 1; /* Qiimaha caadiga ah */
background-color: lightblue;
margin: 5px;
text-align: center;
}

Marka weelka flex-ka uu ka yar yahay wadarta ballacyada sheyada, dhammaan sheyada ayaa yaraan doona si siman.

Tusaale 2: Isticmaalka `flex-shrink: 0`

Halkan, waxaan u dejineynaa `flex-shrink: 0` hal shey, taasoo ka dhigan inuusan yaraan doonin.

<div class="flex-container">
  <div class="flex-item" style="width: 200px;">Item 1</div>
  <div class="flex-item" style="width: 200px; flex-shrink: 0;">Item 2 (Ma yaraanayo)</div>
  <div class="flex-item" style="width: 200px;">Item 3</div>
</div>

.flex-container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}
.flex-item {
flex-shrink: 1;
background-color: lightblue;
margin: 5px;
text-align: center;
}

Sheyga labaad ma yaraan doono, taasoo keeni doonta in sheyada kale ay yaraadaan si ay boos uga helaan.

Tusaale 3: Isticmaalka Qiimayaal Kala Duwan

Waxaad u dejin kartaa qiimayaal kala duwan sheyada flex-ka si aad u xakamayso sida ay u yaraanayaan. Tusaalahan, waxaan u dejinaynaa qiimayaal kala duwan sheyada.

<div class="flex-container">
  <div class="flex-item" style="width: 200px; flex-shrink: 1;">Item 1 (flex-shrink: 1)</div>
  <div class="flex-item" style="width: 200px; flex-shrink: 2;">Item 2 (flex-shrink: 2)</div>
  <div class="flex-item" style="width: 200px; flex-shrink: 3;">Item 3 (flex-shrink: 3)</div>
</div>

.flex-container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}
.flex-item {
background-color: lightblue;
margin: 5px;
text-align: center;
}

Sheyga leh `flex-shrink: 3` ayaa yaraan doona saddex jeer in ka badan sheyga leh `flex-shrink: 1`.

Soo Koobid

`flex-shrink` waa sifo muhiim ah si loo xakameeyo sida ay sheyada flex-ka u yaraanayaan marka boosku yaraado. Waxay kuu ogolaaneysaa inaad abuurto naqshado jawaab celin ah oo si fiican ula qabsanaya cabbirrada shaashadaha kala duwan.