CSS-ի ֆլեքս տարրերի ագահություն

Ենթադրենք, հիմա մենք ունենք երկու ֆլեքս-բլոկ, որոնք դասավորված են շարքով: Այս բլոկներին տրված է լայնություն 100px, իսկ նրանց ծնողին - 300px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Ինչպես տեսնում եք, մեր տարրերի ընդհանուր լայնությունը փոքր է ծնողի լայնությունից, ուստի աջում մնում է դատարկ տարածություն:

Անհրաժեշտության դեպքում այդ դատարկ տարածությունը կարելի է համամասնորեն բաժանել մեր տարրերի միջև: Դա արվում է flex-grow հատկության միջոցով, որը նշվում է ֆլեքս-տարրերին: Այս հատկության արժեքը չափազուրկ թիվ է:

Եկեք գործնականում տեսնենք, թե ինչպես է աշխատում այս հատկությունը:

Օրինակ

Այժմ մենք ունենք երկու ֆլեքս-բլոկ 100px լայնությամբ: Տարրերի ընդհանուր լայնությունը 200px, իսկ ծնողի լայնությունը - 300px: Ստացվում է, որ մնում է ազատ տարածություն 100px:

Եթե տարրերին չի տրվել flex-grow, ապա մենք պարզապես կտեսնենք այդ ազատ տարածությունը: Իսկ եթե այն նշված է, ապա տարրերի իրական լայնությունը կլինի ավելի մեծ, քան նշվածը - դրանք համամասնորեն կբաժանեն ազատ տարածությունը իրենց միջև և կավելացնեն այն իրենց լայնությանը:

Օրինակի համար, ենթադրենք առաջին տարրի flex-grow հավասար է 1, իսկ երկրորդինը - 3: Եկեք հաշվարկենք, թե ազատ տարածության որ մասը կստանա յուրաքանչյուր տարր:

Նախ պետք է ստանալ բոլոր մեր տարրերի flex-grow միավորների ընդհանուր քանակը: Առաջին տարրի համար այն հավասար է 1, իսկ երկրորդի համար - 3: Սա նշանակում է, որ ընդհանուրում այն հավասար է 4:

Այժմ 100px ազատ տարածությունը բաժանենք 4-ի և կստանանք, որ 25px է մեկ միավոր flex-grow-ին: Կստացվի, որ առաջին տարրին կավելացվի մեկ միավոր flex-grow, այսինքն 25px, իսկ երկրորդինը - երեք միավոր, այսինքն 75px:

Առաջին տարրի լայնությունը կլինի 125px, իսկ երկրորդինը - 175px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

Օրինակ

Ենթադրենք, հիմա ծնողի լայնությունը հավասար է 400px, առաջին տարրի լայնությունը 200px, իսկ երկրորդ տարրի լայնությունը - 100px: Կստացվի, որ ազատ տարածությունը կրկին հավասար է 100px:

Եկեք յուրաքանչյուր տարրի տանք flex-grow, հավասար 1: Ընդհանուրում կստացվի 2, այսինքն 100px ազատ տարածությունը պետք է բաժանել 2-ի: Կստացվի, որ 50px է բաժին հասնում մեկ միավոր ագահությանը:

Քանի որ բոլոր տարրերն ունեն flex-grow-ի նույն արժեքը, ապա բոլոր տարրերին կավելացվի նույն արժեքը՝ 50px: Սա նշանակում է, որ առաջին տարրը կդառնա 250px, իսկ երկրորդը կդառնա 150px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Օրինակ

Ենթադրենք, կրկին ծնողի լայնությունը հավասար է 400px, առաջին տարրի լայնությունը 200px, իսկ երկրորդ տարրի լայնությունը - 100px:

Եկեք հիմա առաջին տարրի համար սահմանենք flex-grow 3 արժեքով, իսկ երկրորդինը - 1 արժեքով: Կստացվի, որ ագահությունը ընդհանուրում հավասար է 4: Այդ դեպքում մեկ միավոր ագահությունը հավասար է 100px / 4 = 25px:

Առաջին տարրին կավելացվի 75px, և այն կդառնա 275px, իսկ երկրորդին - 25px, այն կդառնա 125px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Գործնական առաջադրանքներ

Ստորև ներկայացված բոլոր առաջադրանքներում ձեզ կներկայացվի որոշակի կոդ ֆլեքս-տարրերով, որոնք ունեն լայնություն և flex-grow: Ներկայացված կոդի հիման վրա հաշվարկեք, թե ինչ չափսեր կունենա տարրերից յուրաքանչյուրը: Այնուհետև գործարկեք կոդը և ստուգեք ձեր հաշվարկները՝ չափելով տարրերի իրական լայնությունները:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 200px;
  flex-grow: 3;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
  <div class="child elem4">4</div>
</div>

css.parent {
  display: flex;
  width: 1000px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 100px;
  flex-grow: 4;
}
.elem4 {
  width: 100px;
  flex-grow: 3;
}