การจัดเรียงองค์ประกอบ flex ตามคอนเทนเนอร์หลักใน CSS

ค่า space-between ที่กำหนดไว้ในคุณสมบัติ justify-content ช่วยให้สามารถกระจายองค์ประกอบอย่างเท่าเทียมกัน ตามคอนเทนเนอร์หลัก โดยช่องว่างระหว่างองค์ประกอบ จะถูกคำนวณโดยอัตโนมัติ องค์ประกอบแรก จะถูกจัดชิดไปทางขอบซ้าย ส่วนองค์ประกอบสุดท้าย จะถูกจัดชิดไปทางขอบขวา

มาดูตัวอย่างกัน:

css.parent {
  display: flex;
  justify-content: space-between;
}

ผลลัพธ์ของการรันโค้ด:

Задание 1

ทำตามหน้าเว็บตามตัวอย่างนี้: