Source

Flex

គ្រប់គ្រងប្លង់ ការតម្រឹម និងទំហំជួរក្រឡាក្រឡាចត្រង្គបានរហ័ស ការរុករក សមាសធាតុ និងអ្វីៗជាច្រើនទៀតជាមួយនឹងឈុតពេញលេញនៃឧបករណ៍ប្រើប្រាស់ flexbox ឆ្លើយតប។ សម្រាប់ការអនុវត្តស្មុគស្មាញ CSS ផ្ទាល់ខ្លួនប្រហែលជាចាំបាច់។

បើក​ឥរិយាបថ​បត់បែន

displayប្រើឧបករណ៍ប្រើប្រាស់ដើម្បីបង្កើតធុង flexbox និងបំប្លែង ធាតុ កុមារដោយផ្ទាល់ ទៅជាធាតុ flex ។ កុងតឺន័រ និងធាតុ Flex អាចកែប្រែបន្ថែមទៀតជាមួយនឹងលក្ខណៈសម្បត្តិ flex បន្ថែម។

ខ្ញុំជាធុង flexbox!
<div class="d-flex p-2">I'm a flexbox container!</div>
ខ្ញុំជាធុង flexbox ខាងក្នុង!
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ .d-flexនិង .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

ទិសដៅ

កំណត់ទិសដៅនៃធាតុ flex នៅក្នុងធុង flex ជាមួយនឹងឧបករណ៍ប្រើប្រាស់ទិសដៅ។ ក្នុងករណីភាគច្រើន អ្នកអាចលុបចោលថ្នាក់ផ្ដេកនៅទីនេះ ដោយសារកម្មវិធីរុករកតាមអ៊ីនធឺណិតលំនាំដើមគឺ row. ទោះយ៉ាងណាក៏ដោយ អ្នកអាចជួបប្រទះនឹងស្ថានភាពដែលអ្នកត្រូវការដើម្បីកំណត់តម្លៃនេះយ៉ាងច្បាស់ (ដូចជាប្លង់ឆ្លើយតប)។

ប្រើ .flex-rowដើម្បីកំណត់ទិសដៅផ្តេក (លំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត) ឬ .flex-row-reverseដើម្បីចាប់ផ្តើមទិសផ្ដេកពីជ្រុងផ្ទុយ។

ធាតុ Flex 1
ធាតុ Flex 2
ធាតុ Flex 3
ធាតុ Flex 1
ធាតុ Flex 2
ធាតុ Flex 3
<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

ប្រើ .flex-columnដើម្បីកំណត់ទិសដៅបញ្ឈរ ឬ .flex-column-reverseចាប់ផ្តើមទិសដៅបញ្ឈរពីចំហៀង។

ធាតុ Flex 1
ធាតុ Flex 2
ធាតុ Flex 3
ធាតុ Flex 1
ធាតុ Flex 2
ធាតុ Flex 3
<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

កែតម្រូវខ្លឹមសារ

ប្រើ justify-contentឧបករណ៍ប្រើប្រាស់នៅលើធុង flexbox ដើម្បីផ្លាស់ប្តូរការតម្រឹមនៃធាតុ flex នៅលើអ័ក្សមេ (អ័ក្ស x ដើម្បីចាប់ផ្តើម អ័ក្ស y ប្រសិនបើ flex-direction: column) ។ ជ្រើសរើសពី start(លំនាំដើមកម្មវិធីរុករក), end, center, betweenaround.

ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

តម្រឹមធាតុ

ប្រើ align-itemsឧបករណ៍ប្រើប្រាស់នៅលើធុង flexbox ដើម្បីផ្លាស់ប្តូរការតម្រឹមនៃធាតុ flex នៅលើអ័ក្សឈើឆ្កាង (អ័ក្ស y ដើម្បីចាប់ផ្តើម អ័ក្ស x ប្រសិនបើ flex-direction: column) ។ ជ្រើសរើសពី start, end, center, baseline, ឬ stretch(កម្មវិធីរុករកលំនាំដើម)។

ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

តម្រឹមខ្លួនឯង

ប្រើ align-selfឧបករណ៍ប្រើប្រាស់នៅលើធាតុ flexbox ដើម្បីផ្លាស់ប្តូរការតម្រឹមរបស់ពួកគេជាលក្ខណៈបុគ្គលនៅលើអ័ក្សឈើឆ្កាង (អ័ក្ស y ដើម្បីចាប់ផ្តើម អ័ក្ស x ប្រសិនបើ flex-direction: column) ។ ជ្រើសរើសពីជម្រើសដូចគ្នាដូចជា align-items: start, end, center, , baseline, ឬ stretch(កម្មវិធីរុករកលំនាំដើម)។

ធាតុ Flex
ធាតុ flex បានតម្រឹម
ធាតុ Flex
ធាតុ Flex
ធាតុ flex បានតម្រឹម
ធាតុ Flex
ធាតុ Flex
ធាតុ flex បានតម្រឹម
ធាតុ Flex
ធាតុ Flex
ធាតុ flex បានតម្រឹម
ធាតុ Flex
ធាតុ Flex
ធាតុ flex បានតម្រឹម
ធាតុ Flex
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

រឹមស្វ័យប្រវត្តិ

Flexbox អាច​ធ្វើ​រឿង​ដ៏​អស្ចារ្យ​មួយ​ចំនួន​នៅ​ពេល​ដែល​អ្នក​លាយ​ការ​តម្រឹម flex ជាមួយ​រឹម​ស្វ័យប្រវត្តិ។ បង្ហាញខាងក្រោមគឺជាឧទាហរណ៍បីនៃការគ្រប់គ្រងធាតុ flex តាមរយៈរឹមស្វ័យប្រវត្តិ៖ លំនាំដើម (គ្មានរឹមស្វ័យប្រវត្តិ) រុញធាតុពីរទៅខាងស្តាំ ( .mr-auto) និងរុញធាតុពីរទៅខាងឆ្វេង ( .ml-auto) ។

ជាអកុសល IE10 និង IE11 មិនគាំទ្រយ៉ាងត្រឹមត្រូវនូវរឹមស្វ័យប្រវត្តិនៅលើធាតុ flex ដែលមេ justify-contentមានតម្លៃមិនមែនលំនាំដើមទេ។ សូមមើលចម្លើយ StackOverflow នេះ សម្រាប់ព័ត៌មានលម្អិតបន្ថែម។

ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

ជាមួយធាតុតម្រឹម

ផ្លាស់ទីធាតុ flex មួយទៅផ្នែកខាងលើ ឬខាងក្រោមនៃកុងតឺន័រដោយការលាយ align-items, flex-direction: columnនិង margin-top: automargin-bottom: auto.

ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

រុំ

ផ្លាស់ប្តូររបៀបដែលធាតុ flex រុំនៅក្នុងធុង flex ។ ជ្រើសរើសពីការមិនរុំអ្វីទាំងអស់ (លំនាំដើមរបស់កម្មវិធីរុករក) ជាមួយ .flex-nowrapរុំជាមួយ .flex-wrapឬច្រាសមកវិញជាមួយ .flex-wrap-reverse.

ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex flex-nowrap">
  ...
</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex flex-wrap">
  ...
</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

បញ្ជាទិញ

ផ្លាស់ប្តូរ លំដាប់ ដែលមើលឃើញ នៃធាតុ flex ជាក់លាក់ដោយប្រើ orderឧបករណ៍ប្រើប្រាស់មួយចំនួនតូច។ យើងផ្តល់តែជម្រើសសម្រាប់បង្កើតធាតុមុន ឬចុងក្រោយ ក៏ដូចជាការកំណត់ឡើងវិញដើម្បីប្រើការបញ្ជាទិញ DOM ។ ដូចដែល orderយកតម្លៃចំនួនគត់ណាមួយ (ឧទាហរណ៍ 5) បន្ថែម CSS ផ្ទាល់ខ្លួនសម្រាប់តម្លៃបន្ថែមដែលត្រូវការ។

ធាតុ flex ដំបូង
ធាតុ flex ទីពីរ
ធាតុ flex ទីបី
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

តម្រឹមមាតិកា

ប្រើ align-contentឧបករណ៍ប្រើប្រាស់នៅលើធុង flexbox ដើម្បីតម្រឹមធាតុ flex ជាមួយគ្នា នៅលើអ័ក្សឈើឆ្កាង។ ជ្រើសរើសពី start(លំនាំដើមកម្មវិធីរុករក), end, center, between, aroundstretch. ដើម្បីបង្ហាញពីឧបករណ៍ប្រើប្រាស់ទាំងនេះ យើងបានអនុវត្ត flex-wrap: wrapនិងបង្កើនចំនួនធាតុ flex ។

ព្រឺក្បាល! ទ្រព្យសម្បត្តិនេះមិនមានឥទ្ធិពលលើជួរតែមួយនៃធាតុ flex ទេ។

ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-content-end flex-wrap">...</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-content-center flex-wrap">...</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-content-between flex-wrap">...</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-content-around flex-wrap">...</div>
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
ធាតុ Flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

ការប្រែប្រួលឆ្លើយតបក៏មានសម្រាប់ align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch