Mission 1: Flexbox

เป้าหมายของ Mission นี้: จัดวางหลาย element ให้เรียงแนวนอนด้วย display: flex

display: flex คืออะไร

ปกติ <div> แต่ละอันจะซ้อนกันในแนวตั้งเสมอ (เหมือนกล่องวางซ้อนบนพื้น) — ใส่ display: flex; ให้กล่องแม่ จะเปลี่ยนพฤติกรรมลูกทุกตัวข้างในทันที จาก ซ้อนแนวตั้ง กลายเป็นเรียงแนวนอน

Demo

.wrapper {
  display: flex;
}

นี่คือหัวใจของ Layout สมัยใหม่เกือบทั้งหมด — Mission ถัดๆ ไปในบทนี้ล้วนเป็น property เสริมที่ใช้ ร่วมกับ flex เพื่อควบคุมรายละเอียดเพิ่มเติม