ឯកសារ CSS Flexbox ជាភាសាខ្មែរ

រៀនតាមរយះ Source Code នៅក្នុង Github Repository:

• Source Code គឺមានទៅតាម folder ដូច្នេះអ្នកអាចរកនៅក្នុង folder src / exercises បាន!

ជំនួយបន្ថែម:

• ដើម្បីរៀនតាម Tutorial មួយនេះឲ្យកាន់តែឆាប់យល់ ឆាប់ចាប់បាន អ្នកគួរមើលវីដេអូ CSS Flexbox Crush Course ខ្លះៗដែរ ដើម្បីជាជំនួយក្នុងការសិក្សាវាបន្ថែម។

Flexbox CSS In 20 Minutes by Traversy Media

Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial by Dev Ed

Flexbox in CSS | MengSreang Channel

តម្រូវការមុននឹងអាចសិក្សា CSS Flexbox:

• ត្រូវមានចំណេះដឹងទាក់ទងនឹង HTML និង CSS ខ្លះៗដើម្បីងាយស្រួលក្នុងការសិក្សាបន្ថែម!

ចំណុចពិសេសរបស់ CSS Flexbox:

• Flexbox នៅក្នុង CSS គឺអាចធ្វើការបែងចែក Container នៅក្នុង Website របស់អ្នកឲ្យមានលក្ខណះស្តង់ដា រួមបញ្ចូលជាមួយនឹង Properties ជាច្រើន ដែលផ្តល់ភាពងាយស្រួលដល់អ្នកនៅពេលដែលអ្នកត្រូវការ ហើយវាក៏ផ្នែកមួយដ៏សំខាន់ក្នុងការធ្វើ Responsive ទៅលើ Website។

អ្វីទៅជា CSS Flexbox?😯

• Flexbox នៅក្នុង CSS គឺប្រើសម្រាប់កំណត់ធាតុនីមួយៗឲ្យមានភាពស្រស់ស្អាតនិងងាយស្រួលក្នុងការកំណត់ទីតាំង។ នៅក្នុង Flexbox នេះគឺយើងមានរបស់ពីរដែលត្រូវសិក្សាគឺ Parent Element និង Child Element។

  ១.Parent Element:

  • នៅក្នុង Parent Element នេះគឺមាន properties ជាច្រើនដែលយើងត្រូវសិក្សា ដែលមានដូចខាងក្រោម:

    • flex-direction : ប្រើសម្រាប់កំណត់ទិសដៅនៃធាតុដែលវាផ្ទុក។

    • flex-wrap : ប្រើសម្រាប់កំណត់ថាតើធាតុដែលវាផ្ទុកគួរចុះបន្ទាត់ឬអត់ នៅពេលដល់កន្លែងទាល់។

    • flex-flow : ប្រើសម្រាប់សរសេរតែក្នុងមួយ property រវាង flex-direction និង flex-wrap។

    • justify-content : ប្រើសម្រាប់តម្រៀបធាតុទៅតាមទិសដៅនៃទិសដៅគោល។

    • align-content : ប្រើសម្រាប់តម្រៀបធាតុទៅតាមទិសដៅដែលកាត់ទិសដៅគោល(សម្រាប់ច្រើនបន្ទាត់) ។

    • place-content : ប្រើសម្រាប់សរសេរតែក្នុងមួយ properties រវាង justify-content និង align-content ។

    • align-items : ប្រើសម្រាប់តម្រៀបទៅតាមទិសដៅដែលកាត់ទិសដៅគោល(សម្រាប់មួយបន្ទាត់) ។

  ២.Child Element:

  • នៅក្នុង Child Element នេះគឺមាន properties ជាច្រើនដែលយើងត្រូវសិក្សា ដែលមានដូចខាងក្រោម:

    • order : ប្រើសម្រាប់កំណត់លំដាប់។

    • flex-grow : ប្រើសម្រាប់ពង្រីកទំហំទៅឲ្យធាតុនូវទំហំដែលនៅសល់។

    • flex-shrink : ប្រើសម្រាប់ពង្រួមធាតុ។

    • flex-basis : ប្រើសម្រាប់កំណត់ទំហំទៅឲ្យធាតុ។

    • flex : ប្រើសម្រាប់សរសេរតែក្នុងមួយ properties រវាង flex-grow, flex-shrink និង flex-basis ។

    • align-self : ប្រើសម្រាប់កំណត់តម្លៃដូច align-items ប៉ុន្តែសម្រាប់តែមួយធាតុបច្ចុប្បន្ននេះទេ។

ឧទាហរណ៍:

• ខាងក្រោមនេះគឺជាឧទាហរណ៍ដែលមាន Container ដើម្បីក្តោបនូវ Content តូចៗ ហើយនៅក្នុង Content តូចៗនោះគឺមាន Box តូចៗចំនួនប្រាំបន្ថែមទៀត:

src / exercises / index.html

<div class="container">
  <div class="content content__one">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.container{
    width: 100%;
    position: relative;
}

.content{
  width: 90%;
  height: 360px;
  margin: 30px auto;
  background-color: #6C3483;
  border-radius: 10px;
  border: 2px solid #F39C12;
  padding: 10px;
}

.content__one{

}

.box{
  margin: 10px;
  width: 45%;
  height: 45px;
  border-radius: 10px;
  border: 2px solid #dedede;
}

.box__one{
  background-color: #2ECC71;
}

.box__two{
  background-color: #E74C3C;
}

.box__three{
  background-color: #5499C7;
}

.box__four{
  background-color: #F5B041;
}

.box__five{
  background-color: #85929E;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថា នៅក្នុង class content__one គឺមិនទាន់មានកំណត់ style អ្វីចូលទៅក្នុងនឹងនោះទេ ដូច្នេះលទ្ធផលបង្ហាញចេញមកគឺ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះធ្លាក់ចុះជាទម្រង់ជួរឈរ។

• ខាងក្រោមនេះគឺយើងប្រើ flexbox នៅក្នុង class content__two ហើយដើម្បីអាចប្រើប្រាស់ flexbox គឺយើងប្រើ property display ហើយតម្លៃគឺ flex គឺមានលក្ខណះបែបនេះ display: flex;។

src / exercises / index.html

<div class="container">
  <div class="content content__two">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__two{
  display: flex;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__two គឺមានការកំណត់ style ចំនួនមួយ​ property គឺ display: flex ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះឡើងលើជាទម្រង់ជួរដេកវិញ។

• ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់ទិសដៅទៅឲ្យ boxes ទាំងអស់នៅក្នុង class content__three ហើយដើម្បីអាចកំណត់ទិសដៅបាន យើងអាចប្រើប្រាស់នូវ property flex-direction ហើយមានតម្លៃជាច្រើនដែលមានដូច​ជា column, row, column-reverse,​ និង​ row-reverse ។

src / exercises / index.html

<div class="container">
  <div class="content content__three">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__three{
  display: flex;
  flex-direction: column;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__three គឺមានការកំណត់ style ចំនួនមួយ​ property បន្ថែមទៀតគឺ flex-direction: column ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានទិសដៅជាលក្ខណះធ្លាក់ចុះជាទម្រង់ជួរឈរវិញ។

src / exercises / index.html

<div class="container">
  <div class="content content__four">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__four{
  display: flex;
  flex-direction: row;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__four គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-direction: row ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានទិសដៅជាលក្ខណះឡើងលើជាទម្រង់ជួរដេកវិញ។

src / exercises / index.html

<div class="container">
  <div class="content content__five">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__five{
  display: flex;
  flex-direction: column-reverse;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__five គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-direction: column-reverse ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានទិសដៅជាលក្ខណះធ្លាក់ចុះជាទម្រង់ជួរឈរបែបបញ្ច្រាស់ទៅវិញ។

src / exercises / index.html

<div class="container">
  <div class="content content__six">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__six{
  display: flex;
  flex-direction: row-reverse;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__six គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-direction: row-reverse ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានទិសដៅជាលក្ខណះឡើងលើជាទម្រង់ជួរដេកបែបបញ្ច្រាស់ទៅវិញ។

• ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់ការចុះបន្ទាត់របស់ boxes ទាំងអស់នៅក្នុង class content__seven ហើយដើម្បីអាចកំណត់ការចុះបន្ទាត់បាន យើងអាចប្រើប្រាស់នូវ property flex-wrap ហើយមានតម្លៃជាច្រើនដែលមានដូច​ជា wrap, nowrap, និង wrap-reverse ។

src / exercises / index.html

<div class="container">
  <div class="content content__seven">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__seven{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__seven គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ flex-wrap: wrap ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះចុះបន្ទាត់។

src / exercises / index.html

<div class="container">
  <div class="content content__eight">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__eight{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__eight គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-wrap: wrap-reverse ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះចុះបន្ទាត់បែបជាបញ្ច្រាស់ទៅវិញ។

src / exercises / index.html

<div class="container">
  <div class="content content__nine">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__nine{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__nine គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-wrap: nowrap ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះមិនចុះបន្ទាត់ទៅវិញ។

• ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់ទិសដៅនិងការចុះបន្ទាត់រួមបញ្ចូលគ្នាដោយប្រើតែ property តែមួយគត់គឺ flex-flow ហើយមានតម្លៃជាច្រើនដែលមានទៅតាមតម្លៃរបស់ property របស់ flex-direction និង flex-wrap ។

src / exercises / index.html

<div class="container">
  <div class="content content__ten">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__ten{
  display: flex;
  flex-flow: row wrap;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__ten គឺមានការកំណត់ style ចំនួនមួយ property ជំនួស properties ពីរគឺ flex-flow: row wrap ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានទិសដៅជាលក្ខណះជួរដេកហើយមានលក្ខណះបែបជាចុះបន្ទាត់។

• ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីតម្រៀបធាតុជាលក្ខណះជួរដេកទៅឲ្យ boxes ទាំងអស់នៅក្នុង class content__eleven ហើយដើម្បីតម្រៀបធាតុជាលក្ខណះជួរដេកបាន យើងអាចប្រើប្រាស់នូវ property justify-content ហើយមានតម្លៃជាច្រើនដែលមានដូច​ជា center, flex-start, flex-end, space-between, space-around, space-evenly, និង​ stretch ។

src / exercises / index.html

<div class="container">
  <div class="content content__eleven">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__eleven{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__eleven គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ justify-content: center ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅកណ្តាលនៃ content។

src / exercises / index.html

<div class="container">
  <div class="content content__twelve">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twelve{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__twelve គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: flex-start ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅកន្លែងចាប់ផ្តើមនៃ content។

src / exercises / index.html

<div class="container">
  <div class="content content__thirteen">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirteen{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirteen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: flex-end ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅកន្លែងបញ្ចប់នៃ content។

src / exercises / index.html

<div class="container">
  <div class="content content__fourteen">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__fourteen{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__fourteen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: space-between ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅញែកសងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content។

src / exercises / index.html

<div class="container">
  <div class="content content__fifteen">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__fifteen{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__fifteen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: space-around ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅញែកសងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content តែមានគម្លាតរៀងធំបន្តិចនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content។

src / exercises / index.html

<div class="container">
  <div class="content content__sixteen">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__sixteen{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__sixteen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: space-evenly ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅញែកសងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content តែមានគម្លាតស្មើៗគ្នារវាងគម្លាតនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content និងគម្លាតរបស់ boxes នីមួយៗ។

src / exercises / index.html

<div class="container">
  <div class="content content__seventeen">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__seventeen{
  display: flex;
  flex-flow: row wrap;
  justify-content: stretch;
}

លទ្ធផល:

• ដោយយើងបានឃើញហើយថានៅក្នុង class content__seventeen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: stretch ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណះនៅកន្លែងចាប់ផ្តើមនៃ content វាដូចទៅនឹងតម្លៃ defualt។

src / exercises / index.html

<div class="container">
  <div class="content content__eighteenth">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__eighteenth{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__nineteen">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__nineteen{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: flex-start;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: flex-end;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__one">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__one{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: space-between;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__two">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__two{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: space-around;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__three">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__three{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: stretch;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__four">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__four{
  display: flex;
  flex-flow: row wrap;
  place-content: center center;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__five">
    <div class="box box__one"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__five{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__six">
    <div class="box box__one"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__six{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__seven">
    <div class="box box__one"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__seven{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__eight">
    <div class="box box__one"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__eight{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__twenty__nine">
    <div class="box box__one"></div>
  </div>
</div>

src / exercises / css / style.css

.content__twenty__nine{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__one">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__one{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__two">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__two{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__three">
    <div class="box box__one">1</div>
    <div class="box box__two">2</div>
    <div class="box box__three">3</div>
    <div class="box box__four">4</div>
    <div class="box box__five">5</div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__three{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.content__thirty__three > .box{
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 45px;
  color: white;
}

.content__thirty__three > .box__one{
  order: 5;
}

.content__thirty__three > .box__two{
  order: 4;
}

.content__thirty__three > .box__three{
  order: 3;
}

.content__thirty__three > .box__four{
  order: 2;
}

.content__thirty__three > .box__five{
  order: 1;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__four">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__four{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.content__thirty__four > .box__one{
  flex-grow: 1;
}

.content__thirty__four > .box__four{
  flex-grow: 1;
}

.content__thirty__four > .box__five{
  flex-grow: 1;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__five">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__five{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.content__thirty__five > .box__one{
  flex-shrink: 0;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__six">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__six{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.content__thirty__six > .box__two{
  flex-basis: 100px;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__seven">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__seven{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.content__thirty__seven > .box__three{
  flex: 1 0 500px;
}

លទ្ធផល:

src / exercises / index.html

<div class="container">
  <div class="content content__thirty__eight">
    <div class="box box__one"></div>
    <div class="box box__two"></div>
    <div class="box box__three"></div>
    <div class="box box__four"></div>
    <div class="box box__five"></div>
  </div>
</div>

src / exercises / css / style.css

.content__thirty__eight{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.content__thirty__eight > .box__one{
  align-self: center;
}

.content__thirty__eight > .box__two{
  align-self: flex-start;
}

.content__thirty__eight > .box__three{
  align-self: flex-end;
}

.content__thirty__eight > .box__four{
  align-self: stretch;
}

.content__thirty__eight > .box__five{
  align-self: center;
}

លទ្ធផល: