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

Phearom Prom

10 Oct 2016

ប្រអប់អាចបត់បែនបាន ឬ 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 ផ្ដេកពីឆ្វេងទៅស្តាំ៖

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

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

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

# flex-direction

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

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

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

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

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

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

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

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

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

# justify-content

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

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

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

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

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

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

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

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

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

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

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

# align-items

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

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

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

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

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

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

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

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

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

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

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

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

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

# flex-wrap

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

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

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

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

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

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

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

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

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

# 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៖