CSS Flexbox
- Previous Page CSS Box Sizing
- Next Page CSS Media Query
Modulo ng CSS Flexbox Layout
Bago magkaroon ng modulo ng layout ng Flexbox (naglabas), ang mga magagamit na pattern ng layout ay may apat na:
- Blok, ginagamit para sa bahagi ng web (Section)
- Nalalagyan sa loob (Inline), ginagamit para sa teksto
- Talahanan, ginagamit para sa dalawang-dimensyonal na datos ng talahanan
- Paglokasyon, ginagamit para sa malinaw na posisyon ng elemento
Ang modulo ng layout ng Flexbox, ay maaring magbigay ng mas madaling desenyo ng maluwag na pagtugon sa layout, na walang paggamit ng floating o paglokasyon.
Suporta ng Browser
Ang lahat ng modernong browser ay sumusuporta flexbox Atributo.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Elemento ng Flexbox
Kung gusto nating magsimula gamit ang modelo ng Flexbox, dapat nating unang idedefinir ang Flex container.
Ang mga elemento sa itaas ay naglalarawan ng isang flex container na may tatlong flex item (asul na lugar).
ឧទាហរណ៍
May tatlong flex item na flex container:
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>
Ang magulang na elemento (container)
Sa pamamagitan ng paggamit ng display Ang attribute na ito ay na-set sa flexAng flex container ay magiging mabilis na bagay:
ឧទាហរណ៍
.flex-container {
display: flex;
}
Narito ang mga attribute ng flex container:
flex-direction Attribute
flex-direction Ang attribute na ito ay nagtutukoy sa kung saan ang container ay maglalagay ng flex item.
ឧទាហរណ៍
column Ang halaga ay nagtutukoy na ito ay magtutukoy ng vertical na flex item (mula itaas sa ibaba):
.flex-container {
display: flex;
flex-direction: column;
}
ឧទាហរណ៍
column-reverse Ang halaga ay nagpapalipat ng vertical na flex item (mula sa ibaba sa itaas):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
ឧទាហរណ៍
row Ang halaga ay nagpapalipat ng horizontal na flex item (mula sa kaliwa sa kanan):
.flex-container {
display: flex;
flex-direction: row;
}
ឧទាហរណ៍
row-reverse Ang halaga ay nagpapalipat ng horizontal na flex item (mula kanan sa kaliwa):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap Attribute
flex-wrap Ang attribute na ito ay nagtutukoy kung dapat ba itong ililipat ang linya ng flex item.
Ang halimbawa na ito ay naglalaman ng 12 na flex item upang mas mabuti na ipakita ang attribute na flex-wrap.
ឧទាហរណ៍
wrap Ang halaga ay nagtutukoy na ang flex item ay magbabagong linya kung kinakailangan:
.flex-container {
display: flex;
flex-wrap: wrap;
}
ឧទាហរណ៍
nowrap Ang halaga ay nagtutukoy na hindi magbabagong linya ang flex item (default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
ឧទាហរណ៍
wrap-reverse Ang halaga ay nagtutukoy na kung kinakailangan, ang mga flexible item ay magsasalin sa kabaligtaran na pagkakasunod-sunod:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow Attribute
flex-flow Ang attribute na ito ay isang maikling anyo ng gumagamit nang sabay-sabay ang attribute na flex-direction at flex-wrap.
ឧទាហរណ៍
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content Attribute
justify-content Ang attribute na ito ay ginagamit para sa pag-aayos ng flex item:
ឧទាហរណ៍
center Ang halaga ay mag-aayos ng flex item sa gitna ng container:
.flex-container {
display: flex;
justify-content: center;
}
ឧទាហរណ៍
flex-start Ang halaga ay mag-aayos ng flex item sa simula ng container (default):
.flex-container {
display: flex;
justify-content: flex-start;
}
ឧទាហរណ៍
flex-end Ang halaga ay mag-aayos ng flex item sa dulo ng container:
.flex-container {
display: flex;
justify-content: flex-end;
}
ឧទាហរណ៍
space-around Ang halaga ay nagpapakita na ang flex item ay may puwang sa bago, sa gitna at sa pagtatapos ng linya:
.flex-container {
display: flex;
justify-content: space-around;
}
ឧទាហរណ៍
space-between Ang halaga ay nagpapakita na ang flex item ay may puwang sa pagitan ng mga linya:
.flex-container {
display: flex;
justify-content: space-between;
}
align-items Attribute
align-items Ang attribute na ito ay ginagamit para sa patalim na pag-ayon ng flex item.
Sa mga ito na halimbawa, gumagamit kami ng 200 pixel na mataas na container upang mas mabuti na ipakita ang attribute na align-items.
ឧទាហរណ៍
center Ang halaga ay magpapa-paraan ang mga item na flex upang naka-paraan sa gitna ng konteyner:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
ឧទាហរណ៍
flex-start Ang halaga ay magpapa-paraan ang mga item na flex upang naka-paraan sa itaas ng konteyner:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
ឧទាហរណ៍
flex-end Ang halaga ay magpapa-paraan ang mga item na flex upang naka-paraan sa ibaba ng konteyner:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
ឧទាហរណ៍
stretch Ang halaga ay magpapa-paraan ang mga item na flex upang pumuno sa konteyner (default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
ឧទាហរណ៍
baseline Ang halaga ay magpapa-paraan ang mga item na flex ayon sa baseline:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Babala:Ang halimbawa na ito ay gumagamit ng iba't ibang font-size upang ipakita na ang mga item ay naka-paraan ayon sa tekstong baseline:
align-content Attribute
align-content Ang attribute ay ginagamit upang alinlangan ang mga linya ng elastic.
Sa mga sumusunod na halimbawa, gumagamit kami ng konteyner na may taas na 600 pixel at itatatakbo ang attribute na flex-wrap sa wrap upang mas mabuti ipakita ang attribute na align-content.
ឧទាហរណ៍
space-between Ang halaga ay ipapakita ang linya ng elastic na may pantay na pagitan:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
ឧទាហរណ៍
space-around Ang halaga ay ipapakita ang linya ng elastic sa bago, sa gitna at sa huli may kasamang puwang:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
ឧទាហរណ៍
stretch Ang halaga ay itataas ang linya ng elastic upang kunin ang nalalagong espasyo (default):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
ឧទាហរណ៍
center Ang halaga ay ipapakita sa gitna ng konteyner bilang mga linya ng elastic:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
ឧទាហរណ៍
flex-start Ang halaga ay ipapakita sa simula ng konteyner bilang mga linya ng elastic:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
ឧទាហរណ៍
flex-end Ang halaga ay ipapakita sa dulo ng konteyner bilang mga linya ng elastic:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Ganap na naka-paraan
Sa mga sumusunod na halimbawa, aking ilalutas ang isang napakapangkaraniwang problema sa estilo: ganap na naka-paraan.
Solusyon: I-set ang justify-content at align-items Ang setting ng attribute ay naka-paraan sa gitna, pagkatapos ay ang mga item na flex ay magiging ganap na naka-paraan:
ឧទាហរណ៍
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Anak na elemento (item)
Ang direktang mga anak ng flex na konteyner ay magiging awtomatikong mga item na elastic (flex).
上面的元素代表一個灰色彈性容器內的四个藍色彈性項目。
ឧទាហរណ៍
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
用於彈性項目的屬性有：
orderflex-growflex-shrinkflex-basisflexalign-self
order 屬性
order 屬性規定 flex 项目的順序。
代碼中的首個 flex 項目不必在佈局中顯示為第一項。
order 值必須是數字，默認值是 0。
ឧទាហរណ៍
order 屬性可以改變 flex 项目的順序：
<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
flex-grow 屬性
flex-grow 屬性規定某個 flex 項目相對於其餘 flex 項目將增長多少。
該值必須是數字，默認值是 0。
ឧទាហរណ៍
使第三個彈性項目的增長速度比其他彈性項目快八倍：
<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
flex-shrink 屬性
flex-shrink 屬性規定某個 flex 項目相對於其餘 flex 項目將收縮多少。
該值必須是數字，默認值是 0。
ឧទាហរណ៍
不要讓第三個彈性項目收縮得與其他彈性項目一樣多：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
flex-basis 屬性
flex-basis 屬性規定 flex 项目的初始長度。
ឧទាហរណ៍
將第三個彈性項目的初始長度設置為 200 像素：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div>
flex 屬性
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
ឧទាហរណ៍
使第三個彈性項目不可增長（0），不可收縮（0），且初始長度為 200 像素：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div>
align-self 屬性
align-self 属性規定彈性容器內所選項目的對齊方式。
align-self កល្យាណនឹងបំបានស្រាប់ align-items ដែលបានកំណត់ដោយអង្គធាតុ។
នៅក្នុងឧទាហរណ៍ខាងក្រោម ពួកយើងប្រើអង្គធាតុមានទំហំ 200 ភាគសន្ន ដើម្បីបង្ហាញ align-self អោយល្អប្រសើរ។
ឧទាហរណ៍
ដោះស្រាយតួអង្គរីកទីបី នៅចំម្រង់កណ្តាលរបស់អង្គធាតុ។
<div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div>
ឧទាហរណ៍
ដោះស្រាយតួអង្គរីកទីពីរ នៅចំម្រង់កណ្តាលខាងលើ និងតួអង្គរីកទីបី នៅចំម្រង់ខាងក្រោមរបស់អង្គធាតុ។
<div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
ប្រតិបត្តិរូបភាពដែលប្រើ Flexbox
ប្រើ Flexbox ដើម្បីបង្កើតប្រតិបត្តិរីករូបភាព ដែលរូបភាពនេះប្តូររវាងរូបភាពបួន រូបភាពពីរ ឬរូបភាពពេញទំហំអេក្រូច ដោយផ្អែកលើទំហំអេក្រូច។
វិបសាយប្រតិបត្តិរីកដែលប្រើ Flexbox
ប្រើ flexbox ដើម្បីបង្កើតវិបសាយប្រតិបត្តិរីក ដែលមានប្រតិបត្តិរីកការដោះស្រាយ និងមាតុតារាចង្អៀត។
CSS Flexbox កល្យាណ
តាមរយៈបញ្ជីខាងក្រោម គឺកល្យាណ CSS ដែលប្រើជាមួយ flexbox។
| កល្យាណ | ការពន្យល់ |
|---|---|
| display | កំណត់ប្រភេទប្រអប់ HTML ។ |
| flex-direction | កំណត់ទិសដៅរបស់អង្គធាតុរីក ក្នុងអង្គធាតុរីក។ |
| justify-content | ដោះស្រាយតួអង្គរីកដែលមិនបានប្រើទាំងអស់នៃមូលដ្ឋានទម្ងន់ខាងលើ ដោះស្រាយតួអង្គរីកជាប់ពីឆ្វេងទៅស្តាំ។ |
| align-items | ដោះស្រាយតួអង្គរីកដែលមិនបានប្រើទាំងអស់នៃមូលដ្ឋានទម្ងន់ខាងលើ ដោះស្រាយតួអង្គរីកជាប់ពីលើទៅក្រោម។ |
| flex-wrap | កំណត់ថាតើតួអង្គរីកគួរប្តូរជុំវិញ ប្រសិនបើមិនមានមូលដ្ឋានគ្រប់គ្រាន់ក្នុងបន្ទាត់ flex មួយ។ |
| align-content | កែប្រពួននៃអាការ្យ flex-wrap ដូចដែល align-items ប៉ុន្តែវាមិនដោះស្រាយតួអង្គរីក ប៉ុន្តែវាដោះស្រាយបន្ទាត់ flex ។ |
| flex-flow | flex-direction និង flex-wrap ជាកល្យាណតំលៃសញ្ញាបត្រ។ |
| order | កំណត់អារម្មណ៍របស់តួអង្គរីក ចំពោះតួអង្គរីកដ៏មិនទាន់ដាក់នៅក្នុងអង្គធាតុដូចគ្នាផ្សេងទៀត។ |
| align-self | ប្រើសំរាប់កំណត់ទិសដៅរបស់តួអង្គរីករាប់ចង្អៀត។ គ្របដណ្តប់ align-items របស់អង្គធាតុ។ |
| flex | flex-grow、flex-shrink និង flex-basis ជាកល្យាណតំលៃសញ្ញាបត្រ។ |
- Previous Page CSS Box Sizing
- Next Page CSS Media Query
