Flex Introduction

Flexbox คืออะไร?

Flexbox เป็นหนึ่งใน layout mode ใน CSS เหมือนกับ Flow Layout หรือ Positioned Layout โดย Flexbox จะมีหน้าที่ควบคุม Element ต่างๆ ตามแกนหลัก ซึ่งแกนหลักก็สามารถเป็นได้ทั้งแนวตั้ง(column)และแนวนอน(row)

แนวคิดพื้นฐานของ Flexbox

One-dimensional Layout Concept

Flexbox ถูกออกแบบมาเพื่อจัดการ layout ในแนวเดียว (One-dimensional) ซึ่งหมายความว่า Flexbox จะเน้นที่การจัดเรียงองค์ประกอบในแนวแกนเดียวเท่านั้น ไม่ว่าจะเป็นแนวนอน (row) หรือแนวตั้ง (column)

เมื่อเราใช้ Flexbox เราจะกำหนด “main axis” ซึ่งเป็นแกนหลักสำหรับจัดเรียงทุก ๆ element ที่อยู่ใน container นั้น ๆ ซึ่งจะมีทิศทางเดียว ไม่ว่าจะเป็นในแนวตั้งหรือแนวนอน

Main Axis vs Cross Axis

Flexbox ใช้แนวคิดของแกนสองแกน โดยเรียกว่า Main Axis และ Cross Axis ซึ่งช่วยให้เราเข้าใจวิธีการจัดวาง Flex Items ภายใน Container ได้ชัดเจนมากขึ้น

• Main Axis (แกนหลัก):
  • กำหนดโดยค่า flex-direction
  • เมื่อ flex-direction เป็น row → Main Axis คือแนวนอน (จากซ้ายไปขวา)
  • เมื่อ flex-direction เป็น column → Main Axis คือแนวตั้ง (จากบนลงล่าง)
  • ควบคุมการจัดเรียงในแกนหลักด้วยค่าเช่น justify-content
• Cross Axis (แกนรอง):
  • เป็นแกนที่ตั้งฉากกับ Main Axis
  • เมื่อ Main Axis เป็นแนวนอน → Cross Axis คือแนวตั้ง
  • เมื่อ Main Axis เป็นแนวตั้ง → Cross Axis คือแนวนอน
  • ควบคุมการจัดเรียงในแกนรองด้วยค่าเช่น align-items

Flex Container และ Flex Items

Flex Container คือ element หลักหรือ Parent ที่ใช้กำหนดว่าองค์ประกอบลูกภายในนั้นจะถูกจัดเรียงโดย Flexbox

คุณสมบัติที่สำคัญของ Flex Container: ต้องมีการตั้งค่า display: flex; หรือ display: inline-flex; เพื่อเปิดใช้งาน Flexboxกำหนดทิศทางการจัดวาง (flex-direction) และการห่อหุ้ม (flex-wrap) ขององค์ประกอบลูกได้รับผิดชอบการควบคุมตำแหน่งโดยใช้คุณสมบัติอย่าง justify-content (จัดตำแหน่งในแกนหลัก) และ align-items (จัดตำแหน่งในแกนรอง)

Loading...

Flex Container เป็นจุดเริ่มต้นที่สำคัญในการสร้าง layout ด้วย Flexbox เพราะมันจะกำหนดว่าทุกองค์ประกอบลูกจะมีการจัดเรียงและปรับขนาดแบบยืดหยุ่นได้ตามที่เราต้องการ

Flex Items คือองค์ประกอบลูกทั้งหมดภายใน Flex Container

• flex-grow: กำหนดว่า item นั้นจะขยายความกว้างได้มากน้อยแค่ไหนเมื่อพื้นที่ใน container มีเหลือ

• flex-shrink: กำหนดว่า item นั้นจะหดตัวลงเมื่อพื้นที่ใน container จำกัด

• flex-basis: กำหนดขนาดเริ่มต้นของ item ก่อนการขยายหรือหดตัว

• flex: เป็น shorthand ที่รวม flex-grow, flex-shrink และ flex-basis เข้าด้วยกัน

Loading...

การทำงานร่วมกันระหว่างคุณสมบัติของ Flex Container และ Flex Items เป็นสิ่งสำคัญที่จะทำให้ layout เป็นไปตามที่คาดหวัง

• สำหรับ Flex Container:คุณสมบัติอย่าง flex-direction , flex-wrap และjustify-contentมีผลต่อการวางตำแหน่งของ Flex Items ในระดับ container
• สำหรับ Flex Items: ค่าflex-grow , flex-shrink และ flex-basis สามารถปรับแต่งให้ทุก item มีการปรับตัวตามขนาดที่แตกต่างกันเพื่อให้พอดีกับพื้นที่ใน containerการใช้ shorthand flex ทำให้โค้ดดูเรียบร้อยและเข้าใจง่ายขึ้น

<style>
    .container {  
      display: flex;  
      gap: 16px;  
      justify-content: center;
      flex-wrap: wrap; /* ลองสลับค่าระหว่าง nowrap กับ wrap เพื่อดูความแตกต่าง */
  }
    .item {
      flex: 0 0 150px; /* ขยาย, หดตัว, และมีขนาดพื้นฐาน 200px */
  }
</style>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>