အားလုံးပဲ မင်္ဂလာပါ။ ကျွန်တော် ကတော့ Spiceworks Myanmar မှ ညီညီီဇော် ဖြစ်ပါတယ်။ ဒီတစ်ပတ်မှာတော့ CSS မှ display property အကြောင်းကို sharing လုပ်ပေးချင်ပါတယ်။

Display property ဆိုတာဘာလဲ?
Display property က အရေးကြီးတဲ့ layout-control tool တစ်ခုဖြစ်ပြီး၊ HTML element တစ်ခုကို browser မှာ ဘယ်လို ပြသမလဲ၊ ဘယ်လို box အဖြစ် ထုတ်လုပ်မလဲ ဆိုတာကို သတ်မှတ်ပေးပါတယ်။

Display type ကို ပုံမှန်အားဖြင့် Outer display type နှင့် Inner display type နှစ်မျိုးခွဲခြားနိုင်ပါတယ်။
Outer display type
element မှာ block-level (သို့မဟုတ်) inline-level ဖြစ်ပါတယ်၊၊ layout flow ကို ဘယ်လို ထားမလဲ စတာတွေကို သတ်မှတ်ပေးပါတယ်။
Inner display type
သူ့ရဲ့ children တွေကို ဘယ်လို layout နဲ့ စီမလဲ (normal flow, flex, grid, စသဖြင့်) ဆိုတာကို သတ်မှတ်ပေးပါတယ်။

Inline
Element ကို inline box အဖြစ်ပြသပြီး၊ new line အဖြစ်မသတ်မှတ်ပါ။ width/height မရွေးနိုင်ပါ။ Default ဖြစ်တဲ့ span,a tag တို့လိုပါ။

Block, Inline-block, Inline-level box
Element ကို block-level box အဖြစ်ပြသပြီး၊ inline-block က Inline-level box ဖြစ်ပါတယ်။ inline-block က newline ဆင်းလို့ရပြီး width/height သတ်မှတ်လို့ရနိုင်ပါတယ်။

Contents
Parent ဖြစ်တဲ့ container ကို ဖျက်လိုက်ရင်လည်း၊ child elements တွေကို DOM အဆင့်သို့တိုးပြီး ပြသပါတယ်။

Flex
Flex က Block-level ဖြစ်ပြီး flex container parent ကို ခေါ်ပြီး Flexbox layout သုံးနိုင်ပါတယ်။

Inline-flex
Inline-flex က blog level ကို Inline-level အဖြစ်ပြောင်းလဲတဲ့အခါ အသုံးပြုနိုင်ပါတယ်။

Grid
Grid က Block-level container ဖြစ်ပြီး CSS Grid Layout ကို သတ်မှတ်ပြီးမိမိစိတ်ကြိုက်အသုံးပြုနိုင်ပါသည်။ system ရဲ့ dashboard မှာအသုံးများပါတယ်။

Inline-grid
Inline-grid က blog level ရှိတဲ့ grid container ကို Inline-level အဖြစ်ပြောင်းလဲတဲ့အခါ အသုံးပြုပါတယ်။

Table
table tag လိုပြုလုပ်တဲ့ rendering box ဖြစ်ပါတယ်။

Inline-table
Inline-level က table container ဖြစ်ပါတယ်။ table layout တည်ဆောက်တဲ့ အခါအသုံးပြုနိုင်ပါတယ်။

table-caption က table မှာပါတဲ့ caption တွေကို ရေးတဲ့အခါအသုံးပြုလို့ရပါတယ်။

table-column-group ,table-header-group ,table-footer-group ,table-row-group စတာတွေက table နဲ့ ပတ်သက်တဲ့ group, row, columnတွေ ခွဲလိုတဲ့အခါ အသုံးပြုလို့ရပါတယ်။ table ရဲ့ elemen‌t ကို အသုံးပြုလိုတဲ အခါ table က inner display type ဖြစ်တဲ့အတွက် parent ဖြစ်တဲ့ table တစ်ဆင့်ချင်းခေါ်သုံံးရပါမယ်။

None
Element ကို completely remove လုပ်ပြီး layout ထဲမှာ မပေါ်စေပါ။ Visibility နဲ့တူပါတယ်။

Initial
CSS မှသတ်ပေးထားတဲ့ default value (initial value) ကို ပြန်သုံးတဲ့ syntax ဖြစ်ပါတယ်။

Inherit
Parent element ရဲ့ display value ကို child က auto လက်ခံအသုံးပြုပါတယ်။

နိဂုံးချုပ်နေနဲ့

inline, block, inline-block — အခြေခံ layout behavior ပါပြီးသားကို မိမိစိတ်ကြိုက် ပြုလုပ်လိုတဲ့ အခါအသုံးပြုနိုင်ပါတယ်။

flex, inline-flex, grid, inline-grid — modern layout tools တွေဖြင့် responsive designs ရေးရန်အသုံးပြုနိုင်ပါတယ်

table elements များကို table structure အဖြစ် ဖန်တီးရာတွင်။

none, initial,fixed, inherit — visibility control နဲ့ inheritance mechanisms အတွက် ပြုလုပ်တဲ့အခါ သုံးတာများပါတယ်။
အဆုံးထိ ဖတ်ရှပေးတဲ့ အတွက် ကျေးဇူးတင်ပါတယ်ဗျ။