စတွဲပြီး Flexbox

1
2
3
4
5
6
7
8

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

အင်တာအက်ဥ္ပရိယာပုံစံ (CSS Flexbox)

အင်တာအက်ဥ္ပရိယာပုံစံ (Flexbox) ပေါ်ပေါက်ခင် အသုံးပြုနိုင်သော ပုံစံများ အောက်ပါအတိုင်းဖြစ်သည်

  • စကားလုံး
  • စကားလုံး
  • တခုတည်းသော ဂရမ်း
  • အက်ဥ္ပရိယာ၏ ဖော်ထုတ်ခြင်း

အင်တာအက်ဥ္ပရိယာပုံစံသည် အက်ဥ္ပရိယာအင်တာကို ကောင်းမွန်စွာ ကျယ်ပြန့်စွာ အသုံးပြုနိုင်သည်။ အင်တာအက်ဥ္ပရိယာကို သုံးစွဲရာ၌ ပေါ်ပေါက်သော ပုံစံများ နှင့် တူ၍ အသုံးပြုနိုင်သည်။

ကုန်ကျမ်းပေးအား

အသုံးပြုနိုင်သော အက်ဥ္ပရိယာများ အင်တာအက်ဥ္ပရိယာ ဗီဇ

၂၉.၀ ၁၁.၀ ၂၂.၀ 10 ၄၈

အင်တာသည်

အက်ဥ္ပရိယာအင်တာသည် စတင်သုံးစွဲခြင်း အတွက် ကျွန်ုပ်တို့သည် အချက်အလက်ကို သတ်မှတ်ချက်ရမည်။

1
2
3

上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。

实例

含有三个 flex 项目的 flex 容器：


  
1

  
2

  
3

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

အဖိုင်းအဖွဲ့ အချက်အလက် (အကောက်ဆုံး အချက်အလက်)

အဖြစ် display အချက်အလက် သည် flexflex အချက်အလက် သည် ကျယ်ပြန့်ချင်း ဖြစ်သည်:

1
2
3

实例

.flex-container {
  display: flex;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

အောက်ခါအချက်အလက် ဖြစ်သည်:

flex-direction လက်တွေ

flex-direction သုံးအခြေခံ သည် flex အချက်အလက် ကို ဘက်အား ပြုလုပ်ခြင်း အတွက် သုံးသည်။

1
2
3

实例

column ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-direction: column;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

column-reverse ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

row ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-direction: row;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

row-reverse ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flex-wrap လက်တွေ

flex-wrap သုံးအခြေခံ သည် flex အချက်အလက် ကို လျှောက်နှက်ထားခြင်း အတွက် သုံးသည်။

ဤအကျိန်းများတွင် ၁၂ ခု ဖြစ်သော flex အချက်အလက် ပြသခြင်း အတွက် ပြီး ကျယ်ပြန့်ချင်း ပြသချင်သည်။

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

实例

wrap ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

nowrap ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

wrap-reverse ဘက်အား ဘက်အား အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flex-flow လက်တွေ

flex-flow သုံးအခြေခံ သည် flex-direction နှင့် flex-wrap အချက်အလက် ကို တစ်ခုတည်းဖြင့် အစားထိုးခြင်း ဖြစ်သည်။

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

justify-content လက်တွေ

justify-content သုံးအခြေခံ သည် flex အချက်အလက် ကို လျှောက်နှက်ထားခြင်း အတွက် သုံးသည်။

1
2
3

实例

center ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  justify-content: center;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

flex-start ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  justify-content: flex-start;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

flex-end ဘက်အား flex အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

space-around ဘက်အား ဘက်အား အချက်အလက် အချက်အလက် အချက်အလက် အချက်အလက် ပြသသည်:

.flex-container {
  display: flex;
  justify-content: space-around;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

space-between ဘက်အား flex အချက်အလက် အကြား အပ်နှံချင်း တိုက်ကြီး ပြသသည်:

.flex-container {
  display: flex;
  justify-content: space-between;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

align-items လက်တွေ

align-items သုံးအခြေခံ သည် flex အချက်အလက် ကို လျှောက်နှက်ထားခြင်း အတွက် သုံးသည်။

1
2
3

ဤအကျိန်းများတွင် ကျယ်ပြန့်ချင်း ၂၀၀ ပုံစံချိန် သုံးပြီး align-items သုံးအခြေခံ ပြသချင်သည်။

实例

center 值将 flex 项目在容器中间对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

flex-start 值将 flex 项目在容器顶部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

flex-end 值将弹性项目在容器底部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

stretch 值拉伸 flex 项目以填充容器（默认）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

baseline 值使 flex 项目基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

注意：该例使用不同的 font-size 来演示项目已按文本基线对齐：

1
2
3
4

align-content လက်တွေ

align-content 属性用于对齐弹性线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这些例子中，我们使用 600 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

实例

space-between 值显示的弹性线之间有相等的间距：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

space-around 值显示弹性线在其之前、之间和之后带有空格：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

stretch 值拉伸弹性线以占据剩余空间（默认）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

center 值在容器中间显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

flex-start 值在容器开头显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

flex-end 值在容器的末尾显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

完美的居中

在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。

解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

实例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

အခြေခံအကွက်အချက်အဖွဲ့ (အကွက်အချက်အဖွဲ့)

flex အကွက်အချက်အဖွဲ့များ၏ အခြေခံအကွက်အချက်အဖွဲ့များ သည် လုံးချုပ်အားထုတ်လုပ်ထားသော (flex) အကွက်အချက်အဖွဲ့များ ဖြစ်သည်။

1
2
3
4

上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。

实例


  
1

  
2

  
3
 
  
4

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

用于弹性项目的属性有：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 属性

order 属性规定 flex 项目的顺序。

1
2
3
4

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

实例

order 属性可以改变 flex 项目的顺序：


  
1

  
2

  
3
 
  
4

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1
2
3

အကြမ်းအား အမှတ် ဖြစ်ပါ အတိုင်း မည်သည်မျှ မပြတ်တော့ပါ

实例

使第三个弹性项目的增长速度比其他弹性项目快八倍：


  
1

  
2

  
3

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1
2
3
4
5
6
7
8
9

အကြမ်းအား အမှတ် ဖြစ်ပါ အတိုင်း မည်သည်မျှ မပြတ်တော့ပါ

实例

တတိယ အတိုင်းအတာ အကြီးချင်း အကြီးချင်း အတူ မပြတ်တော့ပါ


  
1

  
2

  <div style="flex-shrink: 0">3</div>
  
4

  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flex-basis အချက်အလက်

flex-basis flex အပိုင်းအခြား အကြီးအတန်း အချက်အလက် အသိအမှတ်ပြုသည်。

1
2
3
4

实例

တတိယ အတိုင်းအတာ စတင် အကြီးအတန်း 200 ပမာဏ ပါသည်:


  
1

  
2

  <div style="flex-basis: 200px">3</div>
  
4

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flex အချက်အလက်

flex flex-grow, flex-shrink နှင့် flex-basis အချက်အလက် အစား အသံကို အင်္ဂါရုပ်ဖြင့် ရိုက်လိုက်သည်。

实例

တတိယ အတိုင်းအတာ ကွန်ပို့တွေ့ အကြီးချင်း မပြတ်တော့ (0) အကြီးချင်း မပြတ်တော့ (0) အနေဖြင့် စတင် အကြီးအတန်း 200 ပမာဏ ပါသည်:


  
1

  
2

  <div style="flex: 0 0 200px">3</div>
  
4

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

align-self အချက်အလက်

align-self ကိုယ်ရေးအချက်အလက် အတိုင်းအတာ ကွန်ပို့တွေ့ အပိုင်းအခြား ပြောင်းလဲကြောင်း အသိအမှတ်ပြုသည်。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1
2
3
4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例

把第三个弹性项目对齐到容器的中间：


  
1

  
2

  
3

  
4

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

实例

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：


  
1

  
2

  
3

  
4

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

使用 Flexbox 的响应式图库

flexbox ကို အသုံးပြု၍ အဆိုပါ ပြန့်တက် အများပြား ပုံအချက်အလက် ကို ဖွဲ့စည်းပေးသည်။ ပုံအချက်အလက် အချက်အလက် အပါအဝင် ဖြစ်သည်။

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

flexbox ကို အသုံးပြုသည့် ပြန့်တက် ဝတ္ထု

flexbox ကို အသုံးပြု၍ အဆိုပါ ပြန့်တက် ဝတ္ထု ကို ဖွဲ့စည်းပေးသည်။ အသုံးပြုသည့် အသားပြား အချက်အလက် များ အပါအဝင် ဖြစ်သည်။

လေးမျက်နှာများ ကို ဖြင့်ပေးသည်

CSS Flexbox အကိုးအချုပ်

အော်ဂန်းပျံကား နှင့် အသုံးပြုသည့် CSS အကိုးအချုပ် အချက်အလက် အော်ဂန်းကျမ်း အပါအဝင် ပြုပြင်သည်။

အကိုးအချုပ် ဖော်ပြချက်
display HTML အကိုးအချုပ် အမျိုးအစား ကို အကိုးအချုပ်သည်။
flex-direction အော်ဂန်းပျံကား အကွဲအဝေး အတွင်း အော်ဂန်းပျံကား အကိုးအချုပ် အရာများ အား အဆင့်ပြုသည်။
justify-content အော်ဂန်းပျံကား အကိုးအချုပ် သည် အသားပြား အပေါ် အခြေအနေ မရှိ သော် ခြေဖျား ကို ခြေဖျား အစား ခြေဖျား အား အကိုးအချုပ် ပြုလုပ်သည်。
align-items အော်ဂန်းပျံကား အကိုးအချုပ် သည် အသားပြား အပေါ် အခြေအနေ မရှိ သော် ပေါ်လွှား ကို ပေါ်လွှား အစား ပေါ်လွှား အား အဆိုပါ အကိုးအချုပ် ပြုလုပ်သည်。
flex-wrap အော်ဂန်းပျံကား အကိုးအချုပ် သည် ပြင်းထန်သော အသားပြား အပေါ် အခြေအနေ မရှိ သော် အော်ဂန်းပျံကား အကိုးအချုပ် ကို ဖြင့်ပေးသည်။
align-content flex-wrap အကိုးအချုပ် အပြုအမူ ကို ပြင်ဆင်သည်။ align-items နှင့် အတူတူ ဖြစ်သော်လည်း အော်ဂန်းပျံကား အကိုးအချုပ် ကို အပ်နှံ့စွာပြုလုပ် သော်လည်း အခြား အော်ဂန်းပျံကား အကိုးအချုပ် ကို အပ်နှံ့စွာပြုလုပ် မည်မဟုတ်。
flex-flow flex-direction နှင့် flex-wrap အကိုးအချုပ် အော်ဂန်းပျံကား。
order အော်ဂန်းပျံကား အကိုးအချုပ် သည် အကွဲအဝေးအတွင်းရှိ အခြား အော်ဂန်းပျံကား အကိုးအချုပ် နှင့် အတူ အဆင့်ပြုသည်။
align-self အသုံးပြုသည် ဖြစ်သည့် အဆိုပါ အော်ဂန်းပျံကား အကိုးအချုပ်။ အကွဲအဝေး၏ align-items အကိုးအချုပ် အား အပ်နှံ့စွာပြုလုပ်သည်。
flex flex-grow、flex-shrink နှင့် flex-basis အကိုးအချုပ် ဗီယက်နီယံ အကိုးအချုပ်。