စက်တင်ပုံအစုစု အကြိုးအဝိုင်း

  • ပြီးခဲ့သည် စာစောင် columns
  • နောက်လိုက် စာစောင် content

အသုံးပြုခြင်း နှင့် အဓိပ္ပာယ်

CSS @container အချက်အလက်များသည် အကွက်အရောက်၏ အကြီးအကျယ်အားသို့မဟုတ် အော်ဒါအုပ်ချုပ်ခြင်းအား ပြုလုပ်သော အချက်အလက်များကို သတ်မှတ်ပါ

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

အကြောင်းကြားဘာသာစကားသုံးစွဲသူတွေ၏ CSS တွင် အကွက်အရောက်သည် အခြားအရာများကို အုပ်ချုပ်သော အကွက်အရောက်တစ်ခုဖြစ်၍ အုပ်ချုပ်သော အုပ်ချုပ်ခြင်းကို ပြုလုပ်သည်။

အကြောင်းကြား

အကွက်အရောက်၏ အကြီးအကျယ်အားသို့မဟုတ် အော်ဒါအုပ်ချုပ်ခြင်းအား အခြေအနေအချက်အရာများကို သတ်မှတ်ပါ

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

ကျွန်တော်ကို ကြိုးစားလုပ်ပါ

CSS အသုံးပြုခြင်း

@container containername (containerquery) {
  css declarations
}

အချက်အလက် အတ္ထုပ်

အတ္ထုပ် သတ်မှတ်ချက်
containername အပိုင်းအခြားသည် လိုအပ်သော အခြေအနေအချက်အရာများ
containerquery

အပိုင်းအခြားသည် လိုအပ်သော အခြေအနေအချက်အရာများ

တွင် containerquery တွင် အောက်ပါ သတ်မှတ်ချက်များကို အသုံးပြုသည်:

  • aspect-ratio
  • block-size
  • height
  • inline-size
  • orientation
  • width

ဘာသာစကားသုံးစွဲသူတွေ၏ အထောက်အပံ့

အချက်အလက်များသည် ဒီ @ အာဏာအုပ်ချုပ်ခြင်းကို အထ်ကမ်းစားသော ဘာသာစကားသုံးစွဲသူတွေ၏ ပထမဆုံး ပုံစံတွင် ပါဝင်သည်။

Chrome Edge Firefox Safari Opera
105 105 110 16 91
  • ပြီးခဲ့သည် စာစောင် columns
  • နောက်လိုက် စာစောင် content