justify-content: space-around คืออะไร?
คุณสมบัติ justify-content ควบคุมการจัดเรียงบน Main Axis (แกนหลัก) ค่า space-around จะกระจายพื้นที่ว่าง รอบๆ แต่ละ flex item อย่างเท่าเทียม โดยพื้นที่ขอบจะเป็นครึ่งหนึ่งของพื้นที่ระหว่าง items
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #ffebee;
justify-content: space-around; /* กระจายพื้นที่รอบ items */
padding: 20px;
}
.mycontainer > div {
background-color: #ff5722;
color: white;
text-align: center;
line-height: 60px;
font-size: 24px;
width: 100px;
margin: 5px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>ตัวอย่าง justify-content: space-around</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
การกระจายพื้นที่ (Visual)
Main Axis (แนวนอนสำหรับ row) | 0.5 │ 1 │ 1 │ 1 │ 0.5 | │ Q1 │ Q2 │ Q3 │ Q4 │ │ พื้นที่ขอบซ้าย/ขวา = 0.5 หน่วย พื้นที่ระหว่าง items = 1 หน่วย
เปรียบเทียบ justify-content ทั้งหมด
| ค่า | พฤติกรรม | เหมาะสำหรับ |
|---|---|---|
| flex-start | ชิดจุดเริ่มต้น (ซ้ายสำหรับ row) | เริ่มต้นปกติ |
| flex-end | ชิดจุดสิ้นสุด (ขวาสำหรับ row) | Align ขวา |
| center | กึ่งกลาง | จัดกึ่งกลาง |
| space-between | item แรกชิดซ้าย ตัวสุดท้ายชิดขวา กระจายกลาง | Navigation bar, Toolbar |
| space-around | พื้นที่รอบ item เท่าๆ กัน (ขอบ = 0.5x) | Card grid, Gallery |
| space-evenly | พื้นที่ทุกช่องเท่าๆ กันหมด (รวมขอบ = 1x) | Grid สม่ำเสมอ |
ความแตกต่างสำคัญ: space-between vs space-around vs space-evenly
/* สมมติ container กว้าง 400px, มี 4 items กว้าง 50px แต่ละอัน
พื้นที่ว่างรวม = 400 - 200 = 200px */
justify-content: space-between;
/* ช่องว่าง 3 ช่อง = 200/3 ≈ 66.67px แต่ละช่อง
ขอบซ้าย/ขวา = 0px */
justify-content: space-around;
/* ช่องว่าง 5 ช่อง (ขอบ 2 + ระหว่าง 3) = 200/5 = 40px แต่ละช่อง
ขอบซ้าย/ขวา = 40px, ระหว่าง items = 80px */
justify-content: space-evenly;
/* ช่องว่าง 5 ช่อง = 200/5 = 40px ทุกช่องเท่ากันหมด
ขอบซ้าย/ขวา = 40px, ระหว่าง items = 40px */คำแนะนำ
- ใช้
space-aroundเมื่อต้องการ "ห้องว่าง" รอบๆ items - ใช้
space-evenlyเมื่อต้องการระยะห่างสม่ำเสมอทุกที่ (รองรับในเบราวเซอร์ใหม่) - ร่วมกับ
gap(modern) จะควบคุมระยะห่างได้แม่นยำกว่า
