CSS3 Flexible Boxes Intro

အခုပို့စ်မှာ CSS3 ရဲ့ flex box အကြောင်းနဲ့ပတ်သတ်ပြီး စတင်လေ့လာနေသူတွေအတွက် မိတ်ဆက်အနေနဲ့ ရှင်းလင်းပေးသွားမှာဖြစ်ပါတယ်။

CSS3 Flexible Boxes Intro

CSS3 Flexible Boxes

flexbox ဆိုတဲ့အများသိကြတဲ့ CSS3 Flexible Boxes Layout Modules ဟာ single-directional layout ဖြစ်ပါတယ်။ flexbox တစ်ခုမှာ row ဒါမှမဟုတ် column နှစ်မျိုးထဲက တစ်မျိုးကိုသာသတ်မှတ်ပြီးအသုံးပြုနိုင်တာကို ဆိုလိုတာပါ။

flex box မှာ flex container နဲ့ flex items ဆိုပြီးနှစ်မျိုးရှိပါတယ်။ flex container က parent element ကဲ့သို့ container တွေကိုသတ်မှတ်ဖို့သုံးပါတယ်။ parent element(container) ထဲက items တွေကိုတော့ flex items သုံးပြီးသတ်မှတ်ပါတယ်။

Using Flex Container

  • display:flex

flex container ကိုအသုံးပြုဖို့နိုင်ဖို့အတွက် diplay:flex ဆိုတဲ့ declaration ကိုအသုံးပြုရပါတယ်။ ပုံမှန်အနေနဲ့ element အားလုံးကို column ပုံစံသတ်မှတ်ပေးသွားမှာပါ။

Example:

    <style>
    .container {
      display: flex;
      background: blue;
      padding: 10px;
    }
    .container > div {
      background: yellow;
      width: 100px;
      height: 100px;
      margin: 5px;
    }
  </style>

  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Output: Alt Text


CSS3 Flex Direction

  • flex-direction property

flex-direction property ကိုသုံးပြီး row သို့မဟုတ် column တွေကိုသတ်မှတ်ပါတယ်။ သူ့နဲ့တွဲဖတ် အသုံးပြုနိုင်တဲ့တန်းဖိုးတွေကတော့အောက်ပါအတိုင်းပါ။

row: ဘယ်ဘက်ကနေညာဘက် ကိုနေရာချပါတယ်။ row-reverse: ပြောင်းပြန်ပါ။ ညာနေဘယ်ဘက်ကိုနေရာချပါတယ်။ column: အပေါ်မှအောက်ကို နေရာချပါတယ်။ column-reverse: အောက်ကစပြီး အပေါ်ကိုနေရာချပါတယ်။

Example:

    <style>
    .container {
      display: flex;
      flex-direction: column; // try out such as row,row-reverse instead.
      background: blue;
      padding: 10px;
    }
    .container > div {
      background: yellow;
      width: 100px;
      height: 100px;
      margin: 5px;
    }
  </style>

  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Output (flex-direction: row): Alt Text

Output (flex-direction: row-reverse): Alt Text

Output (flex-direction: column): Alt Text

Output (flex-direction: column-reverse): Alt Text


CSS3 Flex Wrap

ပုံမှန်အားဖြင့် flex container ထဲက element တွေဟာ viewport မှာဆံ့ဆံ့ မဆံ့ဆံ့ တစ်ဆက်ထဲပဲရေးသွားမှာပဲ။ ဒါကို viewport မှာမဆံ့ရင် အောက်ကိုတစ်လိုင်းဆင်းပြီး အဆင်ပြေပြေအလုပ်လုပ်အောင် လုပ်ပေးထားလို့ရပါတယ်။ flex-wrap CSS propetry ကိုသုံးပြီးအလုပ်လုပ်ပါတယ်။ အသုံးပြုတဲ့ တန်းဖိုးတွေကတော့ အောက်ပါအတိုင်းပါ။

nowrap: သူကတော့ပုံမှန် တန်ဖိုးပါ။ wrap: viewport မှာမဆံ့တော့ရင် အောက်ကိုတစ်ကြောင်းပြီးအလုပ်လုပ်ပါတယ်။ wrap-reverse: viewport မှာမဆံ့တော့ရင် အောက်ကိုတစ်ကြောင်းပြီးအလုပ်လုပ်ပါတယ်။ ပြောင်းပြန်နေရာချပါတယ်။

Example:

<style>
    {
      flex-wrap: nowrap;
      flex-wrap: wrap;
      flex-wrap: wrap-reverse;      
    }
</style>

Output (flex-wrap: nowrap): Alt Text

Output (flex-wrap: wrap): Alt Text

Output (flex-wrap: wrap-reverse): Alt Text


CSS3 Flex Flow

  • flex-flow

flex-flow ကတော့ flex-direction နဲ့ flex-wrap property နှစ်ခုတို့ကို ပေါင်းစပ်ပြီးအတိုကောက်ရေးနည်းအနေနဲ့သုံးပါတယ်။ property တန်ဖိုးနှစ်ခုကို ရှေ့နောက်ကြိုက်တဲ့နေရာမှာထားလို့ရပါတယ်။

Example:

  <style>
    .container {
      display: flex;
      flex-flow: row-reverse wrap; // try out others instead
      background: blue;
      padding: 10px;
    }
    .container > div {
      background: yellow;
      width: 100px;
      height: 100px;
      margin: 5px;
    }
  </style>

  <div class="container" id="nowrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>

CSS3 Flexbox Justify Context

justify context CSS property ကတော့ flex items(content) ပတ်လည်က နေရာလွတ်(space)တွေကိုစီမံဖို့ပါ။ ဘယ်၊ ညာ၊ အလယ် ရေပြင်ညီအတိုင်းသတ်မှတ်ပါတယ်။ အောက်မှာဖော်ပြထားတာက justify context နဲ့တွဲသုံးနိင်တဲ့တန်းဖိုးတွေပါ။

  • flex-start
  • flex-end
  • center
  • space-between
  • space-evenly
  • space-around

flex-start: ပုံမှန်တန်ဖိုးဖြစ်ပြီးတော့ flex items(content) တွေကို ဘယ်ဘက်အစက နေရာထားမှာဖြစ်ပါတယ် flex-end: သူကတော့ flex itmes တွေကို ညာဘက်မှာထားမှာဖြစ်ပါတယ်။ center: flex items တွေကို အလယ်မှာထားမှာပါ။ space-between: အရှေ့ flex items နဲ့အနောက် flex items ရဲ့ နေရာလွတ်တွေကိုအညီအမျှသတ်မှတ်ပါသည်။ အလယ်မပါ ပါဘူး။ space-around: flex items တွေအချင်းချင်းကြားထဲမှာရှိတဲ့ နေရာလွတ်တွေကို သတ်မှတ်ပါတယ်။ ရှေ့ဆုံး flex items ရဲ့ရှေ့က နေရာလွတ်နဲ့ နောက်ဆုံး flex items ရဲ့နောက်က နေရာလွတ်တွေမပါဝင်ပါဘူး။ space-evenly: flex items တစ်ခုနဲ့တစ်ခုအပြင် အားလုံးကြားထဲမှာရှိတဲ့ နေရာလွတ်တွေကို ညီတူမျှတူပိုင်းဖြတ်ပါတယ်။

Output (justify-content: flex-start): Alt Text Output (justify-content: flex-end): Alt Text Output (justify-content: center): Alt Text Output (justify-content: space-between): Alt Text Output (justify-content: space-around): Alt Text Output (justify-content: space-evenly): Alt Text


Align Items property

align-items CSS propetry ကတော့ flex items တွေကို အပေါ်အောက် ဒေါင်လိုက် ၉၀ ဒီဂရီအတိုင်းသတ်မှတ်ပါတယ်။ အသုံးပြုနိုင်တဲ့ တန်ဖိုးတွေကတော့အောက်ပါအတိုင်းဖြစ်ပါတယ်။

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

flex-start: viewport ရဲ့ပေါ်ပိုင်းမှာ flex items ကိုသတ်မှတ်ပါတယ်။ flex-end: viewport ရဲ့အောက်ခြေမှာ flex items ကိုသတ်မှတ်ပါတယ်။ center: အပေါ်အောက်ရဲ့ အလယ်မှာ သတ်မှတ်ပါတယ်။ stretch: flex items က သူရဲ့ container တစ်ခုလုံးကို အပေါ်အောက်နေရာအပြည့်နေရာယူလိုက်တာပါ။ baseline: flex items ရဲ့အောက်ခြေ baseline ကနေချိန်ညှိပြီးနေရာသတ်မှတ်ပါတယ်။ အောက်ကပုံမှာ item တွေရဲ့ baseline ကိုမူတည်ပြီး နေရာသတ်မှတ်သွားတာတွေ့ရမှာပါ။ container ရဲ့ baseline မှာသတ်မှတ်တာမဟုတ်ဘူးဆိုတာမြင်ရပါလိမ့်မည်။

Example:

  <style>
     {
      display: flex;
      align-items: stretch; //try out others instead
    }
  </style>

Output (align-items: flex-start): Alt Text Output (align-items: flex-end): Alt Text Output (align-items: center): Alt Text Output (align-items: stretch): Alt Text Output (align-items: baseline): Alt Text


CSS3 Flexbox Align Content Property

align-content ကတော့ ဒေါင်လိုက်အနေအထားရှိနေတဲ့ items တွေရဲ့ နေရာလွတ်(space) ကိုသတ်မှတ်ဖို့သုံးပါတယ်။ align-items ရဲ့ဖြည့်စွက်လုပ်ဆောင်ချက်သဘောမျိုးလို့သတ်မှတ်နိုင်ပါတယ်။ တွဲသုံးနိုင်တဲ့ တန်ဖိုးတွေကတော့အောက်ပါအတိုင်းဖြစ်ပါတယ်။

  • flex-start
  • flex-end
  • center
  • stretch
  • space-between

flex-start: viewport ရဲ့ပေါ်ပိုင်းမှာ flex items ကိုသတ်မှတ်ပါတယ်။ flex-end: viewport ရဲ့အောက်ခြေမှာ flex items ကိုသတ်မှတ်ပါတယ်။ center: အပေါ်အောက်ရဲ့ အလယ်မှာ သတ်မှတ်ပါတယ်။ stretch: flex items ကရှိနေတဲ့သူရဲ့ container တစ်ခုလုံးကို အပေါ်အောက်အပြည့်နေရာယူလိုက်တာပါ။ space-between: ဒေါင်လိုက်အနေအထားရှိတဲ့ items တွေရဲ့ ပထမဆုံးအကြောင်းရဲ့ရှေ့မှာရှိတဲ့ နေရာလွတ်နဲ့ နောက်ဆုံးအကြာင်းရဲ့အောက်ဆုံးမှာရှိနေတဲ့ နေရာလွတ်တွေရဲ့ space တွေကို အညီအမျှသတ်မှတ်တာပါ။ အလယ်မပါ ပါဘူး။ space-around: ဒေါင်လိုက်အနေအထားမှာရှိနေတဲ့ items တွေကြားထဲက နေရာလွတ်တွေကို တူညီစွာသတ်မှတ်ပါတယ်။ မှတ်ချက် - align content property သက်ရောက်အလုပ်လုပ်ဖို့ items တွေဟာတစ်ကြောင်းထက်ပိုရပါမယ်။

Example:

  <style>
    {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;  //try out others instead
    }
  </style>

Output (align-content: flex-start): Alt Text Output (align-content: flex-end): Alt Text Output (align-content: center): Alt Text Output (align-content: space-between): Alt Text Output (align-content: space-around): Alt Text Output (align-content: space-evenly): Alt Text Output (align-content: stretch): Alt Text

CSS3 Flex Items

flex container အပြင် flex items တွေကိုလည်း CCS3 flex items property တွေကိုအသုံးပြုပြီး items တစ်ခုချင်းအလိုက်သတ်မှတ်နိုင်ပါသည်။ အခြေခံသိထားသင့်တဲ့ flex items property တစ်ချို့ကို ဖော်ပြပေးလိုက်ပါတယ်။

order

order property ကိုအသုံးပြုပြီး items တွေရဲ့ဖော်ပြမှုပုံစံ order ကိုစီစဉ်နိုင်ပါတယ်။

 <div class="container">
      <div style="order: 3"> 1 </div>
      <div style="order: 4"> 2 </div>
      <div style="order: 2"> 3 </div>
      <div style="order: 1"> 4 </div>
   </div>

flex-grow

flex-grow နဲ့ item တစ်ခုခြင်းကိုး သူ့ဘေးနားက item တွေရဲ့အရွယ်အစားပေါ်မှာမူတည်ပြီး ကြီးပေးနိုင်ပါတယ်။ ဒီလိုပါ item တိုင်းကို flex-glow: 1 သတ်မှတ်ပြီး၊ item တစ်ခုကိုတော့ တန်ဖိုး 2 သတ်မှတ်ထားမယ်ဆိုရင်၊ တန်ဖိုး 2 သတ်မှတ်ထားတဲ့ item ကတခြား items များထက် 2 ဆကြီးနေမှာပါ။ ကုဒ်ကိုကူးယူစမ်းကြည့်ရင် ရှင်းသွားပါလိမ့်မယ်။

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      background-color: blue;
      padding: 10px;
    }
    .container >div {
      background-color: yellow;
      height: 300px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div style="flex-grow: 1"> 1 </div>
    <div style="flex-grow: 2"> 2 </div>  <!-- grow twice than others -->
    <div style="flex-grow: 1"> 3 </div>
  </div>
</body>
</html>

flex-shrink

သူကသတ်မှတ်လိုက်တဲ့ flex-grow နဲ့ပြောင်းပြန်ဖြစ်ပြီး items ကိုချုံ့ပေးသွားမှာပါ။ အပေါ်ကကုဒ်နေရာမှာ style="flex-grow: 1" အစား style="flex-shrink: 1" နဲ့အစားထိုး စမ်းနိုင်ပါတယ်။

flex-basis

flex items များရဲ့ width ကို သတ်မှတ်ဖို့သုံးပါတယ်။

flex

သူကတော့ flex items တွေရဲ့အတိုကောက်ရေးဟန်ပါ။

  • flex-grow
  • flex-shrink
  • flex-basis

algin-self property

item တစ်ခုကိုတိတိကျကျ သတ်မှတ်ချင်တဲ့အခါ algin-self property သုံးပါတယ်။ valid value တွေကတော့ align-items နဲ့အတူတူပါပဲ။

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


  • A Bonus tip for U!

တကယ်လို့သင်ဟာ front-ent developer သမားတစ်တစ်ယောက်ဖြစ်ပြီး flexbox နဲ့ပတ်သတ်လို့ အတွင်းကျကျ လေ့လာချင်တယ်ဆိုရင် ကျွန်တော့်အနေနဲ့ Web Boss ရဲ့ free master CSS flexbox course ကိုညွှန်းပေးနိုင်ပါတယ်။ မသိသူကျော်သွား သိသူဖော်စားပါပဲ😉။လက်တွေ့ ပရောဂျက်နဲ့ရှင်းပြပေးထားတာမို့လို့ ပိုပြီးထဲထဲဝင်ဝင် လေ့လာနိုင်မှာပါ။ အောက်က လင့်မှာဝင်ရောက် register လုပ်ပြီး flexbox နဲ့ပတ်သက်တဲ့အခမဲ့သင်ခန်းစာ ၂၀ ကိုလေ့လာနိုင်မှာပါ။

flexbox.io

🌱 Happing Coding ...

 
Share this
Proudly part of