CSS ရှိ Flex ဘလောက်များ ကျုံ့ခြင်းကို ထိန်းညှိခြင်း

ပုံမှန်အားဖြင့် အစိတ်အပိုင်းအားလုံးမှ ၎င်းတို့၏ အကျယ်နှင့်အညီ ကန့်သတ်ချက်များ ဖယ်ရှားခံရသည်။ သို့သော် အချို့သော အစိတ်အပိုင်းများမှ ပို၍ကြီးမားသော သို့မဟုတ် ပို၍သေးငယ်သော ကန့်သတ်ချက်များ ဖယ်ရှားခံရအောင် ပြုလုပ်နိုင်သည်။ ဤအတွက် အထူး property တစ်ခုဖြစ်သော flex-shrink ကို အသုံးပြုနိုင်သည်။

ဤ property သည် အလေးချိန်တစ်ခုဖြစ်ပြီး၊ အထက်တွင်ဖော်ပြထားသော ပုံသေနည်းအတိုင်း ဖယ်ရှားရမည့် ကန့်သတ်ချက်ကို တွက်ချက်သည့်အခါ အစိတ်အပိုင်း၏ အကျယ်ကို မြှောက်ပေးရန် အသုံးပြုသည်။ ဥပမာအားဖြင့်၊ အစိတ်အပိုင်း၏ အကျယ်မှာ 200px ဖြစ်ပြီး ၎င်း၏ flex-shrink မှာ 3 ဖြစ်ပါက၊ အစိတ်အပိုင်း၏ အလေးချိန်ထားသော (ဆိုလိုသည်မှာ အလေးချိန်နှင့်မြှောက်ထားသော) အကျယ်မှာ အောက်ပါအတိုင်းဖြစ်လာမည်-

200px * 3 = 600px

flex-shrink ကို ထည့်သွင်းစဉ်းစားထားသော ပုံသေနည်းမှာ အောက်ပါအတိုင်းဖြစ်သည်- အနုတ်လက္ခဏာ လွတ်နေသောနေရာ * (အစိတ်အပိုင်း၏ အလေးချိန်ထားသောအကျယ် / အစိတ်အပိုင်းအားလုံး၏ စုစုပေါင်း အလေးချိန်ထားသောအကျယ်)။

ဥပမာတစ်ခုကို ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် 4 ခုသော အစိတ်အပိုင်းများ ရှိသည်ဆိုပါစို့။ ပထမအစိတ်အပိုင်း၏ အကျယ်မှာ 400px ဖြစ်ပြီး ၎င်း၏ flex-shrink မှာ 2 ဖြစ်သည်၊ ကျန်အစိတ်အပိုင်းများ၏ အကျယ်များမှာ - 200px ဖြစ်ပြီး ၎င်းတို့၏ flex-shrink မှာ 1 ဖြစ်သည်။ မိဘ element ၏ အကျယ်မှာ 900px ဖြစ်သည် ဆိုပါစို့။

အစိတ်အပိုင်းများ၏ စုစုပေါင်းအကျယ်မှာ-

400px + 3 * 200px = 1000px

အနုတ်လက္ခဏာ လွတ်နေသောနေရာ မည်မျှဖြစ်မည်နည်း-

1000px - 900px = 100px

အစိတ်အပိုင်းများ၏ စုစုပေါင်း အလေးချိန်ထားသောအကျယ်မှာ-

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

ပထမအစိတ်အပိုင်း၏ အလေးချိန်ထားသောအကျယ်မှာ-

400px * 2 = 800px

ပထမအစိတ်အပိုင်းမှ အောက်ပါ ကန့်သတ်ချက်ကို ဖယ်ရှားခံရမည်-

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

အစိတ်အပိုင်း၏ အကျယ်မှာ မည်မျှဖြစ်မည်နည်း-

400px - 57.14px = 342.86px ~ 343px

ကျန်အစိတ်အပိုင်းတစ်ခုစီ၏ အလေးချိန်ထားသောအကျယ် မှာ-

200px * 1 = 200px

အစိတ်အပိုင်းတစ်ခုစီမှ အောက်ပါ ကန့်သတ်ချက်ကို ဖယ်ရှားခံရမည်-

100px * (200px / 1400px) = 100px * 0.1429 = 14.29px

အစိတ်အပိုင်း၏ အကျယ်မှာ မည်မျှဖြစ်မည်နည်း-

200px - 14.29px = 185.71px ~ 186px

Задание 1

ဖော်ပြပါဘလောက်များကို တည်ဆောက်ပြီး တိုင်းတာခြင်းဖြင့် အစိတ်အပိုင်းများ၏ အကျယ်မှာ ကျွန်ုပ်တို့ တွက်ချက်ထားသည့်အတိုင်း အမှန်တကယ်ဖြစ်မဖြစ် စစ်ဆေးပါ။

Задание 2

ဘလောက်များ၏ အကျယ်ကို တွက်ချက်ပြီးနောက် တိုင်းတာခြင်းဖြင့် တွက်ချက်မှုများကို စစ်ဆေးပါ-

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: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 2;
}
.elem2 {
  width: 100px;
  flex-shrink: 1;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 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: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 3;
}
.elem2 {
  width: 100px;
  flex-shrink: 2;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 4

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: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
  flex-shrink: 3;
}
.elem2 {
  width: 200px;
  flex-shrink: 2;
}
.elem3 {
  width: 200px;
  flex-shrink: 1;
}
.elem4 {
  width: 200px;
  flex-shrink: 1;
}