Skip to main content

CSS - Flexbox

This chapter will explain to you what Flexbox is and what you can do with CSS.

What is CSS Flexbox?​

  • CSS Flexbox is used to define each element to be beautiful and easy to locate. In this Flexbox, we have two things to study: Parent Element and Child Element.

CSS Flexbox Features​

  • Flexbox in CSS is able to customize the container in your website to a standard combination with many properties that make it easy for you when you need it, and it is also an important part of Responsive website .

CSS Flexbox Properties​

1. Parent Element:

  • In this Parent Element, there are many properties that we need to study, which are as follows:

    • flex-direction: defines in which direction the container wants to stack the flex items.

    • flex-wrap: specifies whether the flex items should wrap or not.

    • flex-flow: is a shorthand property for setting both the flex-direction and flex-wrap properties.

    • justify-content: used to align the flex items.

    • align-content: used to align the flex lines.

    • place-content: is a shorthand property for setting both the justify-content and align-content properties.

    • align-items: used to align the flex items.

2. Child Element:

  • In this Child Element, there are many properties that we need to study, which are as follows:

    • order: specifies the order of the flex items.

    • flex-grow: specifies how much a flex item will grow relative to the rest of the flex items.

    • flex-shrink: specifies how much a flex item will shrink relative to the rest of the flex items.

    • flex-basis: specifies the initial length of a flex item.

    • flex: is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

    • align-self: specifies the alignment for the selected item inside the flexible container.

ឧទាហរណ៍​

  • The following is an example with a container to hold small content, and in that small content there are five more small boxes:

index.html

<div class="container">
  <div class="content content__one">
    <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>

style.css

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

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

.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;
}

លទ្ធផល:

1
2
3
4
5

  • As we have seen, in the content__one class there is no style define, so the result is that all the boxes in the content are in column format.

  • Note: The CSS code in the example below is not rewritten, only new code to be added.

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

index.html

<div class="container">
  <div class="content content__two">
    <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>

style.css

.content__two {
  display: flex;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__two គឺមានការកំណត់ style ចំនួនមួយ​ property គឺ display: flex; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈឡើងលើជាទម្រង់ជួរដេកវិញ។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់ទិសដៅទៅឲ្យ boxes ទាំងអស់នៅក្នុង class content__three ហើយដើម្បីអាចកំណត់ទិសដៅបាន យើងអាចប្រើប្រាស់នូវ property flex-direction ហើយមានតម្លៃជាច្រើនដែលមានដូច​ជា column, row, column-reverse,​និង​ row-reverse។

index.html

<div class="container">
  <div class="content content__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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__four">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__five">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__six">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__six គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-direction: row-reverse; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានទិសដៅជាលក្ខណៈឡើងលើជាទម្រង់ជួរដេកបែបបញ្ច្រាស់ទៅវិញ។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់ការចុះបន្ទាត់របស់ boxes ទាំងអស់នៅក្នុង class content__seven ហើយដើម្បីអាចកំណត់ការចុះបន្ទាត់បាន យើងអាចប្រើប្រាស់នូវ property flex-wrap ហើយមានតម្លៃជាច្រើនដែលមានដូច​ជា wrap, nowrap, និង wrap-reverse។

index.html

<div class="container">
  <div class="content content__seven">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__eight">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__nine">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__nine គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ flex-wrap: nowrap; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈមិនចុះបន្ទាត់ទៅវិញ។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់ទិសដៅនិងការចុះបន្ទាត់រួមបញ្ចូលគ្នាដោយប្រើតែ property តែមួយគត់គឺ flex-flow ហើយមានតម្លៃជាច្រើនដែលមានទៅតាមតម្លៃរបស់ property របស់ flex-direction និង flex-wrap។

index.html

<div class="container">
  <div class="content content__ten">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង 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។

index.html

<div class="container">
  <div class="content content__eleven">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__twelve">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__thirteen">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__fourteen">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__fifteen">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__sixteen">
    <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>

style.css

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

លទ្ធផល:

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

index.html

<div class="container">
  <div class="content content__seventeen">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__seventeen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ justify-content: stretch; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកន្លែងចាប់ផ្តើមនៃ content វាដូចទៅនឹងតម្លៃ defualt បែបជាជួរដេក។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីតម្រៀបធាតុជាលក្ខណៈជួរឈរទៅឲ្យ boxes ទាំងអស់នៅក្នុង class content__eighteenth ហើយដើម្បីតម្រៀបធាតុជាលក្ខណៈជួរឈរបាន យើងអាចប្រើប្រាស់នូវ property align-content(សម្រាប់ច្រើនបន្ទាត់) និង align-items(សម្រាប់មួយបន្ទាត់) ហើយមានតម្លៃជាច្រើនដែលមានដូច​ជា center, flex-start, flex-end, space-between, space-around, និង​ stretch។

index.html

<div class="container">
  <div class="content content__eighteenth">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__eighteenth គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ align-content: center; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកណ្តាលនៃ content បែបជាជួរឈរ។

index.html

<div class="container">
  <div class="content content__nineteen">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__nineteen គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ align-content: flex-start; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកន្លែងចាប់ផ្តើមនៃ content បែបជាជួរឈរ។

index.html

<div class="container">
  <div class="content content__twenty">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__twenty គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ align-content: flex-end; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកន្លែងបញ្ចប់នៃ content បែបជាជួរឈរ។

index.html

<div class="container">
  <div class="content content__twenty__one">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__twenty__one គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ align-content: space-between; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅញែកសងខាងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content បែបជាជួរឈរ។

index.html

<div class="container">
  <div class="content content__twenty__two">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__twenty__two គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ align-content: space-around; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅញែកសងខាងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content តែមានគម្លាតរៀងធំបន្តិចនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content បែបជាជួរឈរ។

index.html

<div class="container">
  <div class="content content__twenty__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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__twenty__three គឺមានការកំណត់ style property ដដែលតែមានការផ្លាស់ប្តូរតម្លៃគឺ align-content: stretch; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកន្លែងចាប់ផ្តើមនៃ content វាដូចទៅនឹងតម្លៃ defualt បែបជាជួរឈរ។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីតម្រៀបធាតុជាលក្ខណៈជួរដេកនិងជួរឈររួមបញ្ចូលគ្នាដោយប្រើតែ property តែមួយគត់គឺ place-content ហើយមានតម្លៃជាច្រើនដែលមានទៅតាមតម្លៃរបស់ property របស់ justify-content និង align-content។

index.html

<div class="container">
  <div class="content content__twenty__four">
    <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>

style.css

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

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__twenty__four គឺមានការកំណត់ style ចំនួនមួយ property ជំនួស properties ពីរគឺ place-content: center center; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកណ្តាលនៃ content បែបជាជួរដេកបូករួមជាមួយនឹងជួរឈរ។

index.html

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

style.css

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

លទ្ធផល:

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

index.html

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

style.css

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

លទ្ធផល:

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

index.html

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

style.css

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

លទ្ធផល:

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

index.html

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

style.css

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

លទ្ធផល:

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

index.html

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

style.css

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

លទ្ធផល:

1
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__twenty__nine គឺមានការកំណត់ style property ដដែលតែអ្វីដែលយើងចង់បញ្ជាក់បន្ថែមនោះគឺជាទូទៅគេនិយមប្រើ property justify-content និង align-items ជាមួយគ្នាព្រោះ justify-content ប្រើសម្រាប់តម្រៀបធាតុទៅតាមទិសដៅនៃទិសដៅគោល រីឯ align-items វិញគឺប្រើសម្រាប់តម្រៀបទៅតាមទិសដៅដែលកាត់ទិសដៅគោល(សម្រាប់មួយបន្ទាត់) ដូច្នេះលទ្ធផលបង្ហាញចេញមកគឺ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកណ្តាលនៃ content បែបជាជួរដេកបូករួមជាមួយនឹងជួរឈរ។
  • ឧទាហរណ៍ខាងក្រោមៗនេះគឺយើងនឹងបង្ហាញអំពីការប្តូរទិសដៅនៃ boxes នៅក្នុង content ទៅជាជួរឈរវិញ ដូច្នេះ property justify-content និង align-items នឹងប្តូរទិសដៅក្នុងការតម្រៀបធាតុដូចគ្នា ដែល justify-content គឺតម្រៀបធាតុបែបជាជួរឈរ ហើយសម្រាប់ align-items គឺតម្រៀបធាតុបែបជាជួរដេកវិញ។

index.html

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

style.css

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

លទ្ធផល:

1
2
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty គឺមានការកំណត់ style property ដូចជា justify-content: center; និង align-items: center; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅកណ្តាលនៃ content បែបជាជួរដេកបូករួមជាមួយនឹងជួរឈរ។

index.html

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

style.css

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

លទ្ធផល:

1
2
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__one គឺមានការកំណត់ style property ដូចជា justify-content: space-between; និង align-items: center; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅញែកសងខាងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content បែបជាជួរឈរ​និងមានលក្ខណៈនៅកណ្តាលនៃ content បែបជាជួរដេក។

index.html

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

style.css

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

លទ្ធផល:

1
2
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__two គឺមានការកំណត់ style property ដូចជា justify-content: space-between; និង align-items: flex-end; ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈនៅញែកសងខាងនៃកន្លែងចាប់ផ្តើមនិងកន្លែងបញ្ចប់របស់ content បែបជាជួរឈរ​និងមានលក្ខណៈនៅកន្លែងបញ្ចប់នៃ content បែបជាជួរដេក។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីកំណត់លំដាប់ទៅឲ្យធាតុកូនៗនៅក្នុង content។

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>

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;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__three គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ order ដូច្នេះ boxes ទាំងអស់នៅក្នុង content គឺមានលក្ខណៈជាលំដាប់ៗតាមអ្វីដែលយើងបានកំណត់នៅក្នុង content។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីពង្រីកទំហំទៅឲ្យធាតុនូវទំហំដែលនៅសល់នៅក្នុង content។

index.html

<div class="container">
  <div class="content content__thirty__four">
    <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>

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;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__four គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ flex-grow ដូច្នេះ box នោះនៅក្នុង content គឺមានលក្ខណៈពង្រីកទំហំទៅឲ្យធាតុនូវទំហំដែលនៅសល់នៅក្នុង content។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីពង្រួមធាតុនៅក្នុង content។

index.html

<div class="container">
  <div class="content content__thirty__five">
    <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>

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;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__five គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ flex-shrink ដូច្នេះ box នោះនៅក្នុង content គឺមានលក្ខណៈពង្រួមធាតុនៅក្នុង content។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីអាចកំណត់ទំហំទៅឲ្យធាតុនៅក្នុង content។

index.html

<div class="container">
  <div class="content content__thirty__six">
    <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>

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;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__six គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ flex-basis ដូច្នេះ box នោះនៅក្នុង content គឺមានលក្ខណៈអាចកំណត់ទំហំទៅឲ្យធាតុនៅក្នុង content។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីសរសេរតែក្នុងមួយ properties រវាង flex-grow, flex-shrink និង flex-basis។

index.html

<div class="container">
  <div class="content content__thirty__seven">
    <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>

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;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__six គឺមានការកំណត់ style ចំនួនមួយ property ជំនួស properties បីគឺ flex: 1 0 500px; ដូច្នេះ box នោះនៅក្នុង content គឺមានលក្ខណៈពង្រីកទំហំទៅឲ្យធាតុនូវទំហំដែលនៅសល់នៅក្នុង content និងមានលក្ខណៈពង្រួមធាតុនៅក្នុង content និងមានការកំណត់ទំហំទៅឲ្យធាតុនៅក្នុង content។
  • ខាងក្រោមនេះគឺយើងប្រើ flexbox ដើម្បីអាចកំណត់តម្លៃដូច align-items ដែរប៉ុន្តែសម្រាប់តែមួយធាតុបច្ចុប្បន្ននេះទេ។

index.html

<div class="container">
  <div class="content content__thirty__eight">
    <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>

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;
}

លទ្ធផល:

1
2
3
4
5
  • ដោយយើងបានឃើញហើយថានៅក្នុង class content__thirty__eight គឺមានការកំណត់ style ចំនួនមួយ property បន្ថែមទៀតគឺ align-self ដូច្នេះ box នោះនៅក្នុង content គឺមានលក្ខណៈនៅទិសដៅដែលបានកំណត់នៃ content បែបជាជួរឈរ។

សរុបសេចក្តី​

  • បន្ទាប់ពីអ្នកបានសិក្សានូវជំពូកនេះចប់ អ្នកនឹងអាចយល់ដឹងបានច្រើនទាក់ទងនឹង CSS Flexbox។