Mission 4: Justify

เป้าหมายของ Mission นี้: จัดตำแหน่งตามแกนหลักด้วย justify-content

justify-content

justify-content ควบคุมการจัดวางตาม แกนหลัก (main axis) — แกนเดียวกับ ทิศทางของ flex-direction ค่าที่ใช้บ่อย: flex-start (ชิดต้น, ค่าเริ่มต้น), center (กึ่งกลาง), space-between (กระจายเต็มพื้นที่ เว้นช่องว่างระหว่างกัน เท่ากัน), space-around (กระจายเว้นรอบแต่ละใบเท่ากัน)

Demo

.wrapper {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}