ស្វែងយល់អំពី CSS Flexbox

ប្រអប់អាចបត់បែនបាន ឬ flexbox, គឺជាម៉ូដប្លង់មួយថ្មីនៅក្នុង CSS3 ។ ការប្រើប្រាស់នៃ flexbox ធានាថារាល់ធាតុធ្វើទៅតាមការស្មានទុកនៅពេលប្លង់ទំព័រត្រូវធ្វើទៅតាមទំហំអេក្រង់ខុសគ្នានិងឧបករណ៍បង្ហាញខុសគ្នា។ សម្រាប់កម្មវិធីជាច្រើន, ម៉ូដប្រអប់អាចបត់បែនបានផ្ដល់នូវភាពល្អប្រសើរជាងម៉ូដែលប្លុកនៅក្នុងនោះវាមិនប្រើធាតុអណ្តែត (float) ឬធ្វើការផ្តួលរឹមប្រអប់ flex ជាមួយរឹមនៃអត្ថបទរបស់វា។ ខាងក្រោមជាការរៀបរាប់ពីលក្ខណៈសម្បត្តិ CSS ដែលត្រូវប្រើជាមួយ flexbox៖

  • display – បញ្ជាក់ប្រភេទនៃប្រអប់ដែលត្រូវប្រើសំរាប់ធាតុ HTML
  • flex-direction – បញ្ជាក់ទិសដៅនៃធាតុដែលអាចបត់បែនបាននៅក្នុងប្រអប់ flex មួយ
  • justify-content – តម្រឹមធាតុ flex តាមទិសផ្ដេកនៅពេលដែលធាតុមិនប្រើចន្លោះដែលអាចប្រើបានទាំងអស់នៅលើអ័ក្សសំខាន់
  • align-items -តម្រឹមធាតុ flex តាមទិសបញ្ឈរនៅពេលដែលធាតុមិនប្រើចន្លោះដែលអាចប្រើបានទាំងអស់ឆ្លងកាត់អ័ក្ស
  • flex-wrap – បញ្ជាក់ថាតើធាតុ flex គួររុំឬមិន, ប្រសិនបើមិនមានកន្លែងគ្រប់គ្រាន់សម្រាប់ពួកគេនៅលើបន្ទាត់ flex មួយ
  • align-content – កែប្រែលក្ខណៈសម្បត្តិ flex-wrap។ វាគឺស្រដៀងគ្នាទៅ align-items ប៉ុន្តែជំនួសឱ្យការ តម្រឹមធាតុ flex, វាតម្រឹមបន្ទាត់ flex
  • flex-flow – សង្ខេបលក្ខណៈសម្បត្តិនៃ flex-direction និង flex-wrap
  • order – បញ្ជាក់លំដាប់របស់ធាតុដែលអាចបត់បែនមួយដែលទាក់ទងទៅការសល់នៃធាតុ flex នៅក្នុងប្រអប់ដូចគ្នា
  • align-self – ប្រើនៅលើធាតុ flex ។ សរសេរជាន់លើលក្ខណៈសម្បត្តិប្រអប់នៃធាតុ align-items
  • flex – បញ្ជាក់ប្រវែងនៃធាតុ flex, ទាក់ទងទៅនឹងការសល់នៃធាតុ flex នៅក្នុងប្រអប់ដូចគ្នា

# Display

Flexbox ផ្ទុកប្រអប់ flex និងធាតុ flex។ ប្រអប់ flex ត្រូវបានប្រកាសដោយកំណត់លក្ខណសម្បត្តិបង្ហាញនៃធាតុទាំង flex (បង្ហាញជាប្លុកមួយ) ឬ inline-flex (បង្ហាញជាបន្ទាត់) ។ នៅខាងក្នុងប្រអប់ flex គឺមានធាតុ flex មួយឬច្រើន។ ធាតុ flex ត្រូវបានដាក់ទីតាំងនៅក្នុងប្រអប់ flex មួយនៅតាមបណ្តោយបន្ទាត់នៃ flex។ តាមលំនាំដើមមានតែ flex មួយបន្ទាត់ប៉ុណ្ណោះក្នុងមួយប្រអប់ flex។ ឧទាហរណ៍ខាងក្រោមបង្ហាញធាតុ flex បី។ ពួកគេត្រូវបានដាក់ទីតាំងតាមលំនាំដើម៖ នៅតាមបន្ទាត់ flex ផ្ដេកពីឆ្វេងទៅស្តាំ៖

css-flexbox1

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox2

វាក៏អាចធ្វើការផ្លាស់ប្តូរទិសដៅនៃបន្ទាត់ flex បានផងដែរ។ ប្រសិនបើយើងកំណត់លក្ខណសម្បត្តិ direction ទៅ rtl (ស្ដាំទៅឆ្វេង) អត្ថបទនេះត្រូវបានទាញពីស្តាំទៅឆ្វេង និងខ្សែបន្ទាត់ flex ក៏ផ្លាស់ប្តូរទិសដៅផងដែរ ដែលនឹងប្តូរប្លង់នៃទំព័រដោយគ្រាន់តែថែមកូដ៖

css-flexbox3

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox4

# flex-direction

លក្ខណៈសម្បត្តិ flex-direction បញ្ជាក់ទិសដៅនៃធាតុដែលអាចបត់បែននៅក្នុងប្រអប់នៃ flex នេះ។ តម្លៃលំនាំដើមនៃ flex-direction គឺជួរដេក (ពីឆ្វេងទៅស្ដាំ, កំពូលទៅបាត) ។

តម្លៃផ្សេងៗទៀតមានដូចខាងក្រោម៖

  • row-reverse – ប្រសិនបើរបៀបនៃការសរសេរ (direction) ពីឆ្វេងទៅស្តាំ ធាតុ flex នឹងត្រូវបានដាក់ចេញពីស្តាំទៅឆ្វេង
  • column – ប្រសិនបើវិធីនៃការសរសេរនេះគឺផ្ដេកធាតុ flex នេះនឹងត្រូវដាក់ចេញបញ្ឈរ
  • column-reverse – ដូចគ្នានឹង column ប៉ុន្តែត្រលប់ក្រោយ

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ row-reverse

css-flexbox5

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox6

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ column

css-flexbox7

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox8

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ column-reverse

css-flexbox9

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox10

# justify-content

លក្ខណៈសម្បត្តិ justify-content តម្រឹមធាតុ flex តាមទិសផ្ដេកនៅពេលដែលធាតុមិនប្រើចន្លោះដែលអាចប្រើបានទាំងអស់នៅលើអ័ក្សសំខាន់។

តម្លៃផ្សេងៗទៀតមានដូចខាងក្រោម៖

  • flex-start – តម្លៃលំនាំដើម។ ធាតុត្រូវបានដាក់នៅដើមនៃប្រអប់
  • flex-end – ធាតុត្រូវបានដាក់នៅចុងបញ្ចប់នៃប្រអប់
  • center – ធាតុត្រូវបានដាក់នៅកណ្តាលនៃប្រអប់
  • space-between – ធាតុត្រូវបានដាក់នៅចន្លោះរវាងបន្ទាត់
  • space-around – ធាតុត្រូវបានដាក់នៅចន្លោះមុន, រវាង, ហើយបន្ទាប់ពីបន្ទាត់

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ flex-end

css-flexbox11

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox12

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ center

css-flexbox13

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox14

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ space-between

css-flexbox15

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox16

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ space-around

css-flexbox17

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox18

# align-items

លក្ខណៈសម្បត្តិ align-items តម្រឹមធាតុ flex តាមទិសបញ្ឈរនៅពេលដែលធាតុមិនប្រើចន្លោះដែលអាចប្រើបានទាំងអស់ឆ្លងកាត់អ័ក្ស។

តម្លៃផ្សេងៗទៀតមានដូចខាងក្រោម៖

  • stretch – តម្លៃលំនាំដើម។ ធាតុត្រូវបានទាញឱ្យសមទៅនឹងប្រអប់
  • flex-start – ធាតុត្រូវបានដាក់នៅកំពូលនៃប្រអប់
  • flex-end – ធាតុត្រូវបានដាក់នៅបាតនៃប្រអប់
  • center – ធាតុត្រូវបានដាក់នៅកណ្តាលនៃប្រអប់ (បញ្ឈរ)
  • baseline – ធាតុត្រូវបានដាក់នៅមូលដ្ឋាននៃប្រអប់

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ stretch

css-flexbox19

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox20

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ flex-start

css-flexbox21

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox22

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ flex-end

css-flexbox23

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox24

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ center

css-flexbox25

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox26

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ baseline

css-flexbox27

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox28

flex-wrap

លក្ខណៈសម្បត្តិ flex-wrap បញ្ជាក់ថាតើធាតុ flex គួររុំឬមិន, ប្រសិនបើមិនមានកន្លែងគ្រប់គ្រាន់សម្រាប់ពួកគេនៅលើបន្ទាត់ flex មួយ។

តម្លៃផ្សេងៗទៀតមានដូចខាងក្រោម៖

  • nowrap – តម្លៃលំនាំដើម។ ធាតុដែលអាចបត់បែនបាននឹងមិនរុំ
  • wrap – ធាតុអាចបត់បែនបាននឹងរុំបើចាំបាច់
  • wrap-reverse – ធាតុអាចបត់បែនបាននឹងរុំ, បើចាំបាច់, នៅក្នុងលំដាប់បញ្ច្រាស

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ nowrap

css-flexbox29

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox30

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ wrap

css-flexbox31

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox32

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ wrap-reverse

css-flexbox33

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox34

# align-content

លក្ខណៈសម្បត្តិ align-content កែប្រែលក្ខណៈសម្បត្តិ flex-wrap។ វាគឺស្រដៀងគ្នាទៅ align-items ប៉ុន្តែជំនួសឱ្យការ តម្រឹមធាតុ flex, វាតម្រឹមបន្ទាត់ flex។

តម្លៃផ្សេងៗទៀតមានដូចខាងក្រោម៖

  • stretch – តម្លៃលំនាំដើម។ បន្ទាត់បានទាញដើម្បីយកចន្លោះដែលនៅសល់
  • flex-start – បន្ទាត់ត្រូវបានដាក់ឆ្ពោះទៅរកការចាប់ផ្តើមនៃប្រអប់ flex
  • flex-end – បន្ទាត់ត្រូវបានដាក់ឆ្ពោះទៅរកចុងបញ្ចប់នៃប្រអប់ flex
  • center – បន្ទាត់ត្រូវបានដាក់ឆ្ពោះទៅកណ្តាលនៃប្រអប់ flex
  • space-between – បន្ទាត់ត្រូវបានចែកចាយរាបស្មើនៅក្នុងប្រអប់
  • space-around – បន្ទាត់ត្រូវបានចែកចាយរាបស្មើនៅក្នុងប្រអប់ flex បាន, ដោយទំហំពាក់កណ្តាលនៅចុងសងខាង

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីលទ្ធផលនៃការប្រើប្រាស់តម្លៃ center

css-flexbox35

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox36

# order

លក្ខណៈសម្បត្តិ order បញ្ជាក់លំដាប់របស់ធាតុដែលអាចបត់បែនមួយដែលទាក់ទងទៅការសល់នៃធាតុ flex នៅក្នុងប្រអប់ដូចគ្នា។ ឧទាហរណ៍៖

css-flexbox37

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox38

# align-self

លក្ខណៈសម្បត្តិ align-self ប្រើនៅលើធាតុ flex ។ សរសេរជាន់លើលក្ខណៈសម្បត្តិប្រអប់នៃធាតុ align-items។ ឧទាហរណ៍៖

css-flexbox39

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox40

# flex

លក្ខណៈសម្បត្តិ flex បញ្ជាក់ប្រវែងនៃធាតុ flex, ទាក់ទងទៅនឹងការសល់នៃធាតុ flex នៅក្នុងប្រអប់ដូចគ្នា។ ឧទាហរណ៍៖

css-flexbox41

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-flexbox42