အဓိကအကြောင်းအရာသို့ ကျော်သွားရန်
LibraTool logoLibraTool

အခမဲ့ CSS Flexbox ဖန်တည်းကိရိယာ

flex direction၊ wrap၊ justify နှင့် align တွင်စမ်းသပ်ပါ live အရာများ — နှင့် CSS ကိုကူးယူပါ။

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်
အစဉ်အလာများ

အကြံပြု — live အစမ်းကြည့်မှုတွင်အရာများအပေါ်နှိပ်ပြီး flex-grow: 1 ကိုအစီအစဉ်ပေးရန်အားလုံးများကိုအစီအစဉ်ပေးပါ။

Live ကြည့်ရှုမှု
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 အားလုံးသည် browser တွင်လုပ်ဆောင်သည် — အဘယ်အရာမျှအပ်ကြေးလိုက်လျောမည်မဟုတ်။

မည်သို့ အလုပ်လုပ်သည်

Interactive flexbox playground တစ်ခု: flex-direction, wrap, justify-content and align-items ကို ပြောင်းပြီး live item 10 ခုအထိ ချက်ချင်း ပြန်စီစဉ်သည်ကို ကြည့်ပါ။ Item မည်သည်ကိုမဆို click လုပ်၍ ၎င်းကို flex-grow: 1 ပေးပြီး ၎င်းသည် နေရာမည်သို့ ရရှိသည်ကို ကြည့်ပါ။ CSS သည် live update ဖြစ်ပြီး သင့် project ထဲသို့ ကူးယူရန် အသင့်ဖြစ်သည်။

  1. 1
    Container ကို သတ်မှတ်ပါ
    Direction၊ wrap၊ justify-content၊ align-items၊ gap။
  2. 2
    Item များ ထည့်ပါ
    နံပါတ်တပ်ထားသော flex item တစ်ခုမှ ဆယ်ခုအထိ။
  3. 3
    စမ်းသပ်ကြည့်ပါ
    Item တစ်ခုကို click လုပ်၍ flex-grow ကို toggle လုပ်ပြီး အကျိုးသက်ရောက်မှုကို ကြည့်ပါ။
  4. 4
    CSS ကို ကူးယူပါ
    Container (and item) rule များ, paste ရန် အသင့်ဖြစ်ပြီး။

အားလုံးကို သင့် browser ထဲတွင် လုပ်ဆောင်ပါသည် — ဘာမှ upload မလုပ်ပါ။

ဆက်နွှယ်သော ကိရိယာများ

🟦

CSS Grid ဖန်တည်းကိရိယာ

CSS grid အားမြင်သာစွာ ဒီဇိုင်းဆွဲ — ကြေးများ၊ ယူနစ်များနှင့်ကွာဒျောင်းများ — နှင့် ထုတ်ဖန်တည်းသောCSS နှင့် HTML ကိုကူးယူပါ။

ကြိုးစားပါ
🌈

CSS ဂရေဒီယင်းထုတ်လုပ်စက်

live preview ဖြင့် linear, radial နှင့် conic CSS gradient ဖန်တီးပါ။ တစ်ချက်နှိပ်ကာ CSS copy ပါ。

ကြိုးစားပါ
🎨

CSS Box Shadow ထုတ်လုပ်စက်

live preview, multi-layer stacking, color picker, inset toggle နှင့် တစ်ချက်နှိပ်ကာ copy ဖြင့် CSS box-shadow visual builder ။ Material, neumorphism နှင့် glow preset ပါဝင်သည်。

ကြိုးစားပါ

မကြာခဏ မေးလေ့မေးထရှိသော မေးခွန်းများ