การจัดเรียงองค์ประกอบเฟล็กซ์ตามผู้ปกครองโดยมีระยะห่าง

ค่า space-around ในคุณสมบัติ justify-content กำหนด ระยะห่างให้กับองค์ประกอบเฟล็กซ์ตัวแรกและตัวสุดท้าย จากขอบของผู้ปกครอง

เมื่อมองแวบแรกอาจดูเหมือนว่าระยะห่าง ระหว่างองค์ประกอบและระหว่างองค์ประกอบขอบนอกสุด กับผู้ปกครองจะเท่ากัน อย่างไรก็ตาม นั่นไม่ใช่เรื่องจริง - ระยะห่างระหว่างองค์ประกอบจะมากกว่า ระยะห่างระหว่างผู้ปกครองกับองค์ประกอบขอบนอกสุด ถึง 2 เท่า

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

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

ผลลัพธ์จากการเรียกใช้โค้ด: