Hordhac ku saabsan `flex-grow`

Sifada flex-grow waxay go'aamisaa sida ay sheyga flex-ka u kori doonto si ay u buuxiso booska bannaan ee ku jira weelka flex-ka. Qiimaha flex-grow wuxuu noqon karaa tiro, taasoo tilmaameysa qiyaasta booska bannaan ee ay sheyga qaadan doonto.

Isticmaalka `flex-grow`

Hadii aad rabto in sheyga flex-ka uu koro si uu u buuxiyo booska bannaan, waxaad u dejin kartaa flex-grow qiime ka weyn 0.

.sheyga {
  flex-grow: 1; /* Sheyga wuxuu buuxin doonaa booska bannaan */
}

Tusaale

Aan aragno tusaale sida loo isticmaalo flex-grow:

  
Sheyga 1
  
Sheyga 2
  
Sheyga 3

.weelka {
  display: flex;
  border: 1px solid black;
}

.sheyga {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
}

.sheyga-1 {
  flex-grow: 1; /* Sheyga 1 wuxuu buuxin doonaa booska bannaan */
}

Tusaalahan, sheyga 1 wuxuu koraa si uu u buuxiyo booska bannaan ee ku jira weelka flex-ka, halka sheyga 2 iyo sheyga 3 aysan korin.

Qiimaha Kala Duwan ee `flex-grow`

Waxaad isticmaali kartaa qiimaha kala duwan ee flex-grow si aad u xakamayso qiyaasta booska ay sheyga qaadan doonaan.

.sheyga-1 {
  flex-grow: 1; /* Sheyga 1 wuxuu qaadan doonaa 1 qiyaasood oo booska bannaan */
}

.sheyga-2 {
  flex-grow: 2; /* Sheyga 2 wuxuu qaadan doonaa 2 qiyaasood oo booska bannaan */
}

Tusaalahan, haddii uu jiro 3 qiyaasood oo boos bannaan ah, sheyga 1 wuxuu qaadan doonaa 1 qiyaasood, sheyga 2 wuxuu qaadan doonaa 2 qiyaasood.

Soo Koobid

Sifada flex-grow waxay aad u anfac badan tahay marka aad rabto in aad xakamayso sida ay sheyga flex-ka u buuxin doonto booska bannaan ee ku jira weelka flex-ka. Waxay kuu sahlaysaa in aad sameyso layout-yo jawaab celin ah oo si fiican u shaqeeya cabbirada shaashadaha kala duwan.