align-content: stretch คืออะไร?
ค่า stretch เป็น ค่าเริ่มต้น (default) ของ align-content ทำให้ Flex Lines (บรรทัดทั้งหมด) ยืดเต็มความสูง/กว้างของ Cross Axis โดยอัตโนมัติ เพื่อเติมเต็มพื้นที่ว่าง
เงื่อนไขการทำงาน
display: flex+flex-wrap: wrap- คอนเทนเนอร์มีขนาด Cross Axis จำกัด (height สำหรับ row, width สำหรับ column)
- Items ในบรรทัดไม่มี
align-selfที่ขัดขวาง
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px; /* ความสูงจำกัด */
background-color: #ffebee;
align-content: stretch; /* ค่าเริ่มต้น - ยืดบรรทัดเต็มความสูง */
flex-wrap: wrap; /* สำคัญ: ต้อง wrap */
padding: 10px;
}
.mycontainer > div {
background-color: #ffc107;
color: #333;
text-align: center;
line-height: 60px; /* จัดข้อความกึ่งกลางใน item */
font-size: 24px;
width: 100px;
margin: 5px;
border-radius: 4px;
/* ไม่มี height -> จะยืดตามบรรทัด */
}
</style>
</head>
<body>
<h1>ตัวอย่าง align-content: stretch (default)</h1>
<p>บรรทัดทั้ง 3 จะยืดสูงเท่ากัน เต็ม 200px (ประมาณ 66px ต่อบรรทัด)</p>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
</div>
</body>
</html>
การทำงานของ stretch (Visual)
Container: 200px height, 8 items, 3 lines (3, 3, 2 items) Available space: 200px align-content: stretch (default) ┌────────────────────┐ │ ▓▓ ▓▓ ▓▓ │ ← Line 1: ~66.67px (stretched) │ ▓▓ ▓▓ ▓▓ │ ← Line 2: ~66.67px (stretched) │ ▓▓ ▓▓ │ ← Line 3: ~66.67px (stretched) └────────────────────┘ ทุกบรรทัดสูงเท่ากัน = Container height / Number of lines
align-content: stretch vs align-items: stretch
| คุณสมบัติ | ควบคุม | ผลลัพธ์ |
|---|---|---|
| align-items: stretch | Items ภายใน "บรรทัดเดียว" | Items ยืดสูงเท่ากันในบรรทัด (Equal height items per row) |
| align-content: stretch | "บรรทัดทั้งหมด" (Flex lines) | บรรทัดยืดสูงเท่ากัน (Equal height rows) |
การใช้งานจริง: Equal Height Rows Grid
.equal-row-grid {
display: flex;
flex-wrap: wrap;
align-content: stretch; /* default - บรรทัดสูงเท่ากัน */
gap: 16px;
height: 600px; /* จำกัดความสูง */
}
.equal-row-grid > .item {
flex: 1 1 200px; /* ขยายเท่ากันในบรรทัด */
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
/* ผลลัพธ์: ทุกบรรทัดสูงเท่ากัน, ทุก item ในบรรทัดเดียวกันสูงเท่ากัน */เมื่อไหร่ไม่ควรใช้ stretch
/* 1. Masonry layout - ไม่ต้องการ equal height */
.masonry {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* บรรทัดชิดบน, สูงตาม content */
}
/* 2. Centered content - ไม่ต้องการยืด */
.centered-grid {
display: flex;
flex-wrap: wrap;
align-content: center; /* บรรทัดกึ่งกลาง */
justify-content: center; /* items กึ่งกลางในบรรทัด */
}คำแนะนำ
stretchเป็นค่าเริ่มต้น - ไม่ต้องเขียนก็ได้ ถ้าต้องการพฤติกรรมนี้- เหมาะสำหรับ Equal Height Rows (Grid layout ที่แถวเท่าๆ กัน)
- ร่วมกับ
align-items: stretch(default) จะได้ Equal height ทั้ง items และ rows - ถ้าต้องการ Masonry (Pinterest style) ให้ใช้
align-content: flex-start
