Flexbox

មាតិកា

1. បញ្ហានៃការរៀបចំ Layout
2. Flex Container និង Flex Item
3. Main Axis និង Cross Axis
4. ការដកគម្លាត និងការតម្រឹម
5. gap
6. Wrapping
7. កំណត់ទំហំ Item៖ grow, shrink, basis
8. រូបមន្ត៖ Navbar
9. រូបមន្ត៖ ការដាក់ត្រង់កណ្តាល និង Card
10. សាកល្បងដោយខ្លួនឯង

1. បញ្ហានៃការរៀបចំ Layout

រហូតមកដល់ពេលនេះ element ទាំងអស់ត្រូវបានតម្រៀបពីលើចុះក្រោម ព្រោះនោះជារបៀបដែល block element ហូរ។ ប៉ុន្តែទំព័រពិតត្រូវការច្រើនជាងនេះ៖ logo នៅខាងឆ្វេង និងម៉ឺនុយនៅខាងស្តាំ card បីនៅក្នុងជួរតែមួយ ប៊ូតុងមួយនៅចំកណ្តាលប្រអប់។

អស់រយៈពេលជាច្រើនឆ្នាំ គេធ្វើវាដោយល្បិចដែលពិបាកប្រើ — float, table, ទទឹងថេរ។ Flexbox ("flexible box") គឺជាឧបករណ៍ទំនើបដែលបង្កើតឡើងសម្រាប់ការងារនេះ។ វាត្រូវបានរចនាឡើងដើម្បីរៀប item តាម បន្ទាត់មួយ — ជួរដេក ឬជួរឈរ — ហើយចែកចាយលំហរវាងពួកវា។

2. Flex Container និង Flex Item

Flexbox ចាប់ផ្តើមដោយ declaration មួយនៅលើ parent៖

<div class="row">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.row {
  display: flex;
}

Parent ក្លាយជា flex container ហើយ កូនផ្ទាល់ របស់វាក្លាយជា flex item។ ភ្លាមៗនោះ div ទាំងបីនឹងនៅជាប់គ្នាក្នុងជួរដេកតែមួយ ជំនួសឲ្យការតម្រៀបពីលើចុះក្រោម។ មានតែកូនផ្ទាល់ប៉ុណ្ណោះដែលរងផលប៉ះពាល់ ចៅមិនរងទេ។

Property ខ្លះដាក់នៅលើ container (របៀបរៀប item) ហើយខ្លះទៀតដាក់នៅលើ item (របៀបដែល item នីមួយៗធ្វើតាម)។ ការដឹងថាមួយណាជាមួយណា គឺជាពាក់កណ្តាលនៃការប្រយុទ្ធ។

3. Main Axis និង Cross Axis

Flexbox គិតជាពីរទិស៖

flex-direction: row (default)

 main axis  ───────────────────────────►
 ┌─────┐ ┌─────┐ ┌─────┐
 │  1  │ │  2  │ │  3  │    cross axis
 └─────┘ └─────┘ └─────┘         │
                                  ▼

flex-direction: column

 main axis  │   ┌─────┐
            │   │  1  │
            │   └─────┘     cross axis
            │   ┌─────┐   ─────────────►
            ▼   │  2  │
                └─────┘

• Main axis ដំណើរការតាមទិសដែល item ត្រូវបានរៀប។
• Cross axis កែងនឹងវា។

flex-direction ជ្រើសរើស main axis៖ row (លំនាំដើម ពីឆ្វេងទៅស្តាំ), column (ពីលើចុះក្រោម) ឬកំណែបញ្ច្រាស row-reverse និង column-reverse។ អ្វីៗទាំងអស់នៅក្នុងផ្នែកបន្ទាប់សំដៅលើ main និង cross មិនមែនផ្ដេក ឬបញ្ឈរទេ — ដូច្នេះ property តែមួយដំណើរការបានទាំងពីរទិស។

ការបញ្ច្រាសផ្លាស់ប្តូរតែលំដាប់ដែលមើលឃើញប៉ុណ្ណោះ មិនមែនលំដាប់សម្រាប់ screen reader ឬអ្នកប្រើក្តារចុចទេ។ នោះអាចធ្វើឲ្យពួកគេច្រឡំ ដូច្នេះសូមប្រើតិចៗ។

4. ការដកគម្លាត និងការតម្រឹម

Property របស់ container ពីរធ្វើការងារភាគច្រើន៖

តម្លៃរបស់ justify-content៖

តម្លៃរបស់ align-items៖ stretch (លំនាំដើម៖ item ពេញទំហំ cross), flex-start, flex-end, center និង baseline (baseline នៃអត្ថបទតម្រឹមគ្នា)។

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

វិធីចងចាំងាយៗ៖ "justify" គឺតាម main axis, "align" គឺកាត់វា។ បើអ្នកមិនប្រាកដ សូមសាកល្បងទាំងពីរ ហើយមើលក្នុង DevTools — នៅក្នុងផ្ទាំង Elements ស្លាក flex តូចមួយនៅជាប់ element បើក/បិទ overlay ដែលគូរ axis និងលំហទំនេរ។

5. gap

ដើម្បីដាក់លំហ រវាង item សូមប្រើ gap នៅលើ container ជំនួសឲ្យ margin នៅលើកូននីមួយៗ៖

.row {
  display: flex;
  gap: 1rem;
}

gap បន្ថែមលំហតែរវាង item ប៉ុណ្ណោះ មិនដែលនៅគែមខាងក្រៅទេ ដូច្នេះមិនមាន margin ដែលនៅសល់លើ item ចុងក្រោយឲ្យអ្នកត្រូវតស៊ូជាមួយទេ។ អ្នកអាចផ្តល់តម្លៃពីរ៖ gap: 1rem 2rem គឺ row gap បន្ទាប់មក column gap។

6. Wrapping

តាមលំនាំដើម flex container រក្សាអ្វីៗទាំងអស់នៅលើ បន្ទាត់តែមួយ ដោយបង្រួម item ឲ្យសមនឹងវា — សូម្បីតែដល់ពេលវាលើសក៏ដោយ។ ដើម្បីឲ្យ item ហូរទៅបន្ទាត់ថ្មី សូមបើក wrapping៖

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

ឥឡូវ item រក្សាទំហំរបស់វា ហើយ wrap ទៅជួរបន្ទាប់នៅពេលគ្មានកន្លែងគ្រប់គ្រាន់។ នេះគឺជាមូលដ្ឋាននៃ layout "responsive ដោយមិនប្រើ media query" ជាច្រើន។ Shorthand flex-flow: row wrap កំណត់ direction និង wrap ជាមួយគ្នា។

7. កំណត់ទំហំ Item៖ grow, shrink, basis

Property នៅលើ item គ្រប់គ្រងរបៀបដែលពួកវាចែករំលែកលំហទំនេររបស់ container៖

Shorthand គឺ flex: grow shrink basis។ តម្លៃដែលអ្នកនឹងប្រើច្រើនបំផុត៖

.item { flex: 1; }          /* share the free space equally */
.sidebar { flex: 0 0 16rem; }   /* fixed 16rem, never grows or shrinks */
.content { flex: 1; }       /* take everything that's left */

flex: 1 នៅលើ item ទាំងអស់ ផ្តល់ជូនអ្នកនូវជួរឈរទទឹងស្មើគ្នា។ បើ item មួយមាន flex: 2 ហើយពីរផ្សេងទៀតមាន flex: 1 នោះ item ធំទទួលបានចំណែកទ្វេដង។

margin: auto គឺជាល្បិចងាយស្រួលមួយ៖ នៅលើ flex item, margin-left: auto រុញវាទៅខាងស្តាំបំផុត ដោយស្រូបយកលំហទំនេរទាំងអស់។

8. រូបមន្ត៖ Navbar

នេះគឺជា header ដែលមានឈ្មោះនៅខាងឆ្វេង និង link នៅខាងស្តាំ៖

<header class="site-header">
  <a href="index.html" class="brand">Dara Sok</a>
  <nav aria-label="Main">
    <ul class="nav-list">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

ប្រើ flex container ពីរ៖ header បំបែក brand និង nav ឲ្យឆ្ងាយពីគ្នា ហើយ .nav-list រៀប <li> ក្នុងជួរដេកតែមួយ។ ការដាក់ flex container ទ្រនាប់គ្នាបែបនេះជារឿងធម្មតា — នីមួយៗគ្រប់គ្រងបន្ទាត់មួយនៃការរចនា។

9. រូបមន្ត៖ ការដាក់ត្រង់កណ្តាល និង Card

ការដាក់ត្រង់កណ្តាល។ ការដាក់អ្វីមួយឲ្យនៅកណ្តាលបញ្ឈរ ធ្លាប់ពិបាកខ្លាំងណាស់។ ជាមួយ Flexbox វាគ្រាន់តែបីបន្ទាត់៖

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

ជួរនៃ card ដែលចែករំលែកលំហ wrap នៅពេលចាំបាច់ ហើយមានទទឹងស្មើគ្នា៖

.projects {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.projects .card {
  flex: 1 1 14rem;
}

flex: 1 1 14rem អានថា៖ "ចាប់ផ្តើមនៅ 14rem, ពង្រីកដើម្បីបំពេញលំហដែលនៅសល់ ហើយបង្រួមបើចាំបាច់។" នៅលើអេក្រង់ធំ អ្នកអាចទទួលបាន card បីក្នុងមួយជួរ។ នៅលើអេក្រង់តូច ពួកវា wrap ទៅពីរ បន្ទាប់មកមួយ ដោយមិនត្រូវការ media query។

ចំណុចដែលត្រូវប្រុងប្រយ័ត្ន៖ នៅក្នុង flex layout ដែល wrap, ជួរ នីមួយៗចែករំលែកលំហដោយឡែកពីគ្នា ដូច្នេះ card នៅជួរចុងក្រោយអាចត្រូវបានលាតធំជាង card ផ្សេងទៀត។ Grid នៅជំពូកទី 10 មិនមានបញ្ហានេះទេ ដែលជាហេតុផលមួយដែលវាល្អជាងសម្រាប់ gallery នៃ card។

10. សាកល្បងដោយខ្លួនឯង

1. មើល axis។ បង្កើត .row មួយដែលមានប្រអប់បី ហើយបើក Flexbox។ ប្តូរ flex-direction ទៅ column បន្ទាប់មកសាកល្បងលេងជាមួយ justify-content និង align-items។ ប្រើ flex overlay របស់ DevTools។
2. សាងសង់ navbar។ ប្រើរូបមន្តនៅផ្នែកទី 8 លើទំព័រទាំងពីរ។ ពិនិត្យថា link អាចចូលដល់បានដោយប្រើ Tab។
3. ធ្វើ sticky footer។ ដាក់ display: flex, flex-direction: column និង min-height: 100vh លើ body បន្ទាប់មកដាក់ flex: 1 លើ main។ ឥឡូវ footer នៅខាងក្រោមបំផុត សូម្បីតែលើទំព័រខ្លី។
4. រៀបចំ layout នៃ project។ ធ្វើឲ្យ <article> នៃ project របស់អ្នកជា flex ជាមួយ flex: 1 1 14rem។ ប្តូរទំហំ window ហើយមើលពួកវា wrap។ បន្ថែម card ទីបួន ហើយមើលថាជួរចុងក្រោយធ្វើអ្វី។
5. រុញដោយ margin។ នៅក្នុង navbar បន្ថែម link "Sign in" ហើយដាក់ margin-left: auto ឲ្យវា។ តើវាទៅនៅឯណា?
6. តម្រៀបឡើងវិញដោយប្រុងប្រយ័ត្ន។ ប្រើ flex-direction: row-reverse លើ nav បន្ទាប់មកចុច Tab ឆ្លងកាត់វា។ តើអ្នកកត់សម្គាល់អ្វីអំពីលំដាប់?

បន្ទាប់ គឺ Grid៖ ពាក់កណ្តាលម្ខាងទៀតនៃ layout ទំនើប ដែលបង្កើតឡើងសម្រាប់ជួរដេក និង ជួរឈរក្នុងពេលតែមួយ។