Flex Fundamentals

การตั้งค่า Flex Container

Flex Container คือพื้นฐานที่สำคัญของ Flexbox เพราะเป็นตัวที่กำหนดว่าองค์ประกอบลูก (Flex Items) ภายใน container นี้จะถูกจัดวางแบบยืดหยุ่นอย่างไร

<style>
  .container {  
      display: flex; /* เปิดใช้งาน Flexbox */  
      gap: 16px;
      border: 2px solid #333;  
      padding: 10px;  
      flex-wrap: wrap;
  }  
  .item {  
      flex: 1 1 150px;
      background-color: #84cc16;  
      color: #fff;  
      padding: 24px;   
      text-align: center;  
  }
</style>
<div class="container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>  
</div>

คุณสมบัติของ Flex Container

Flex Container มี property หลักหลายตัวที่ช่วยกำหนดทิศทางและลักษณะการจัดวางของ Flex Items

1. flex-direction

ทำหน้าที่กำหนดทิศทางหลังที่ Flex Items ให้จัดเรียงกันตามแนวแกนที่กำหนด

• ค่าที่ใช้คือ:
  1. row (ค่าเริ่มต้น, จัดเรียงจากซ้ายไปขวา)
  2. row-reverse (จัดเรียงจากขวาไปซ้าย)
  3. column (จัดเรียงจากบนลงล่าง)
  4. column-reverse (จัดเรียงจากล่างขึ้นบน)

<style>
  .flex-container {  
      display: flex; 
      flex-direction: row; 
      gap: 8px;
  }
  .item {  
      background-color: #84cc16;  
      color: #fff;  
      padding: 24px;   
      text-align: center;  
  }
</style>
<div class="flex-container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>
</div>

2. flex-wrap

เมื่อพื้นที่ใน container ไม่พอให้แสดงทุก item ในบรรทัดเดียว สามารถใช้ Property flex-wrap ให้ items ขึ้นบรรทัดถัดไปได้

• ค่าที่ใช้คือ:
  1. nowrap (ค่าเริ่มต้น, ไม่ขึ้นบรรทัดใหม่)
  2. wrap (ให้องค์ประกอบขึ้นบรรทัดถัดไป)
  3. wrap-reverse (ขึ้นบรรทัดใหม่ในแนวกลับด้าน)

<style>
  .flex-container {  
      display: flex; 
      flex-wrap: wrap; /* ย่อขนาด panel เพื่อดูผลลัพท์ */
      gap: 8px;
  }
  .item {  
      background-color: #84cc16;  
      color: #fff;  
      padding: 24px;   
      text-align: center;  
  }
</style>
<div class="flex-container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>
</div>

3. Flex Container alignment ที่ใช้บ่อย

• justify-content: จัดตำแหน่ง Flex Items ตามแกนหลัก ค่าทั่วไป: flex-start, flex-end, center, space-between, space-around, space-evenly

• align-items: จัดตำแหน่ง Flex Items ในแกนรอง (ตั้งฉากกับแกนหลัก) ค่าทั่วไป: flex-start, flex-end, center, baseline, stretch

  flex-direction: row;flex-direction: row-reverse;flex-direction: column;flex-direction: column-reverse;

  flex-direction: row;

  แสดงชื่อแกน

  justify-content: flex-start;justify-content: flex-end;justify-content: center;justify-content: space-between;justify-content: space-around;justify-content: space-evenly;

  justify-content: flex-start;

  align-items: stretch;align-items: flex-start;align-items: flex-end;align-items: center;align-items: baseline;

  align-items: stretch;

  Item 1

  Item 2

  Item 3

  Item 4

  แกนหลัก

  แกนรอง

4. Gap

Gap เป็นคุณสมบัติที่ถูกพัฒนามาเพื่อเพิ่มระยะห่างระหว่าง Flex Items โดยอัตโนมัติ ทำให้การจัดวาง spacing มีความเป็นระเบียบมากขึ้น

<style>
  .flex-container {  
      display: flex; 
      gap: 16px;
  }
  .item {  
      background-color: #84cc16;  
      color: #fff;  
      padding: 24px;   
      text-align: center;  
  }
</style>
<div class="flex-container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>
</div>

<style>
  .flex-container {  
      display: flex;  
      row-gap: 10px; /* ช่องว่างระหว่างแถว */  
      column-gap: 20px; /* ช่องว่างระหว่างคอลัมน์ */
      flex-wrap: wrap;  
  }
  .item {  
      background-color: #84cc16;  
      color: #fff;  
      padding: 24px;   
      text-align: center;  
  }
</style>
<div class="flex-container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

คุณสมบัติของ Flex Items

Flex Items คือองค์ประกอบลูกที่อยู่ใน Flex Container ซึ่งแต่ละ item สามารถกำหนด property เพื่อตั้งค่าการขยายตัวและการหดตัวตามพื้นที่ที่มี

1. flex-grow

ค่าที่กำหนดว่า Flex Item นั้นขยายตัวออกมากน้อยเพียงใดเมื่อมีพื้นที่ว่างใน container

<style>
  .container {  
      display: flex;   
      justify-content: center;
  }
  aside {  
      flex-grow: 1;  
  }
  main {  
      flex-grow: 2;       
  }
</style>
<div class="container">  
  <aside></aside>  
  <main></main>
</div>

โดยหลักการทำงานของ flex-grow จะใช้การกำหนดอัตราส่วนการขยายตัวของ Flex Items ใน container โดยค่าที่กำหนดจะเป็นตัวเลขที่บวก ซึ่งหมายถึงอัตราส่วนการขยายตัวของ item นั้นๆ

ค่าเริ่มต้นของ flex-grow คือ 0 ซึ่งหมายถึงว่า item จะไม่ขยายตัวเลย

จากตัวอย่างโค้ด <aside> มี flex-grow: 1 และ <main> มี flex-grow: 2 สามารถรวมค่า flex-grow ทั้งหมด = 1 + 2 = 3

คำนวณสัดส่วน

• aside จะได้พื้นที่ 1/3 ของพื้นที่ว่างที่เหลือ
• main จะได้พื้นที่ 2/3 ของพื้นที่ว่างที่เหลือ

ตัวอย่างการคำนวณ

ถ้าหากว่าพื้นที่ว่างใน container คือ 600px และมี aside กับ main อยู่ใน container นี้ จะได้

• aside จะได้ 200px
• main จะได้ 400px

จากภาพผลลัพธ์จะเห็นว่าพื้นที่สีเขียว (aside) มีขนาด 1 ส่วน และพื้นที่สีแดง (main) มีขนาด 2 ส่วน ตามค่า flex-grow ที่กำหนด

2. flex-shrink

ค่าที่กำหนดว่า Flex Item จะหดตัวลงมากน้อยเพียงใด เมื่อพื้นที่ใน container ถูกจำกัด

<style>
  .container {  
    display: flex;  
  }
  .no-shrink {
    flex-shrink: 0;
  }
  .normal-shrink {
    flex-shrink: 1;
  }
  .double-shrink {
    flex-shrink: 2;
  }
</style>
<div class="container">  
  <div class="item no-shrink">  
    ไม่หด  
    <br />(shrink: 0)  
  </div>  
  <div class="item normal-shrink">  
    หดปกติ  
    <br />(shrink: 1)  
  </div>  
  <div class="item double-shrink">  
    หดเร็ว  
    <br />(shrink: 2)  
  </div>  
</div>

จากตัวอย่างเมื่อ container มีพื้นที่จำกัด และมี Flex Items ที่กำหนดค่า flex-shrink ต่างกัน จะเห็นว่า กล่องแรก (สีแดง) จะไม่หดตัวเลยเพราะ flex-shrink: 0 ส่วนกล่องที่สอง (สีเขียว) จะหดตัวเป็นปกติเพราะ flex-shrink: 1 และกล่องสุดท้าย (สีน้ำเงิน) จะหดตัวเร็วขึ้นเพราะ flex-shrink: 2

3. flex-basis

ใช้กำหนดขนาดเริ่มต้นตามแนวแกนหลักของ Flex Item เทียบเท่ากับ width ในแนวนอนและ height ในแนวตั้ง ก่อนที่จะดำเนินการขยายหรือหดพื้นที่ตาม flex-grow และ flex-shrink

<style>
  .container {  
    display: flex;    
  }
  .auto {  
    flex-basis: auto; /* ขนาดตามเนื้อหา */  
  }
  .pixels {  
    flex-basis: 200px; /* ขนาดคงที่ */  
  }
  .percentage {  
    flex-basis: 30%; /* ขนาดเป็นเปอร์เซ็นต์ */  
  }
</style>
<div class="container">  
  <div class="box auto">  
      flex-basis: auto  
      <br />ขนาดตามเนื้อหา  
  </div>  
  <div class="box pixels">  
      flex-basis: 200px  
      <br />ขนาดคงที่  
  </div>  
  <div class="box percentage">  
      flex-basis: 30%  
      <br />ขนาดเป็น %  
  </div>  
</div>

4. flex (Shorthand)

เป็น shorthand รวมสาม Property เข้าไว้ด้วยกัน คือ flex-grow , flex-shrink และ flex-basis

Loading...

<style>
  .container {  
    display: flex;  
    gap: 10px;  
    padding: 10px;  
    background: #f0f0f0;  
}
  /* ตัวอย่างที่ 1: ยืดหยุ่นเต็มที่ */  
  .one {  
    flex: 1; /* เท่ากับ flex: 1 1 0 */  
  }
  /* ตัวอย่างที่ 2: ขนาดคงที่ ไม่ยืด ไม่หด */  
  .two {  
    flex: 0 0 100px; /* grow shrink basis */  
  }
  /* ตัวอย่างที่ 3: ยืดได้ แต่ไม่หด */  
    .three {  
      flex: 1 0 100px;  
    }
</style>
<div class="container">  
  <div class="box one">1</div>  
  <div class="box two">2</div>  
  <div class="box three">3</div>  
</div>

สามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้งาน Flexbox มากขึ้นจากบทความของ Josh W Comeau Interactive Guide to Flexbox