1. Container คืออะไร?
   container เปรียบเสมือน “กล่องใหญ่” ที่ใช้ห่อหุ้มเนื้อหาทั้งหมดของหน้าของหน้าเว็บ ไม่ให้แผ่ออกไปสุดหน้าจอ เช่น header, body หรือ footer
   • ทำให้เนื้อหากึ่งกลางหน้าอัตโนมัติ
   • มี padding อัตโนมัติไม่ให้ชิดขอบเกินไป
   • จำกัดความกว้างของเนื้อหาให้ดูพอดีในทุกหน้าจอ
   เหมาะกับ: โครงสร้างหลักของหน้า เช่น ส่วนหัว เนื้อหา หรือ footer

ตัวอย่าง

<div class="container mx-auto px-4">
  <h1>ยินดีต้อนรับ</h1>
  <p>นี่คือเนื้อหาภายใน container</p>
</div>

2. Flex คืออะไร?
flex ย่อมาจาก “flexible box” คือการจัดเรียง “ลูกในกล่อง” ไม่ว่าจะเป็นแนวนอนหรือแนวตั้ง
• ใช้จัดตำแหน่งลูก div ให้อยู่เรียงกัน เช่น จัดเรียงเมนูรูปภาพหรือปุ่มภายในกล่อง, ควบคุมแถว/คอลัมน์แบบยืดหยุ่น
• สามารถควบคุมช่องว่าง ระยะห่าง หรือการยืดหดของกล่องได้
เหมาะกับ: การจัด layout ย่อย (แถว/คอลัมน์) แบบ responsiveเช่น เมนู, การ์ดสินค้า, รายการภาพ ฯลฯ

ตัวอย่าง

<div class="d-flex text-white bg-secondary">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
 </div>

3. ใช้เมื่อไหร่ดี?
   • ใช้ container เมื่อต้องการเริ่มจัด layout หลักของหน้าเว็บ ให้ทุกอย่างในหน้าอยู่ในกรอบเดียวกัน ไม่เลื่อนล้นจนเต็มความกว้างของหน้าจอ
   • ใช้ flex เมื่อต้องการเรียงกล่องหรือจัดตำแหน่งภายใน container หรือ section ใดๆ ให้อยู่ในแนวที่กำหนด

ตัวอย่างการใช้ร่วมกัน

<div class="bg-secondary py-6">
     <div class="container bg-warning">
         <h1>ยินดีต้อนรับ</h1>
         <p>นี่คือเนื้อหาภายใน container</p>

         <div class="d-flex text-white bg-success">  
             <div class="p-2 bg-info">Flex item 1</div>
             <div class="p-2 bg-danger">Flex item 2</div>
             <div class="p-2 bg-primary">Flex item 3</div>
         </div>
      </div>
 </div>

สรุป
• container = กล่องใหญ่ ควบคุมโครงร่างหลักและความกว้างของเนื้อหาทั้งหน้า + จัดกึ่งกลาง
• flex = ก้อนเล็ก ควบคุมการจัดเรียงภายในกล่องใหญ่ (container)
• ใช้ร่วมกันได้เพื่อให้ layout ทั้งหน้าเว็บ เรียบร้อย และยืดหยุ่น เพื่อตอบโจทย์ Responsive