การทำงานกับ Flexbox ใน CSS
อย่างที่คุณทราบ มีคุณสมบัติ justify-content
ที่จัดเรียงองค์ประกอบตามแกนหลัก
ยังมีคุณสมบัติ align-items ที่
จัดเรียงองค์ประกอบตามแกนตัด ลองมา
เล่นกับมันสักหน่อย
สมมติว่าตอนนี้บล็อกเรียงเป็นแถว
นั่นคือแกนตัดชี้ลง ด้วย
align-items ให้ตั้งบล็อกเหล่านี้
ไว้ตรงกลาง:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
ตอนนี้ลองเพิ่มบล็อกมากขึ้น เพิ่ม
ความสามารถในการขึ้นบรรทัดใหม่ด้วย flex-wrap
เพิ่มความสูงขององค์ประกอบแม่จาก 300px เป็น
500px แล้วมาดูว่า align-items จะ
ทำงานอย่างไรในกรณีที่มีหลายบรรทัดนี้:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
อย่างที่เราเห็น มีบางอย่างที่ไม่ค่อยอยู่กึ่งกลาง ดูเหมือนว่าแต่ละแถวจะอยู่กึ่งกลางเอง ตามพื้นที่ที่กำหนดให้ ลองทำให้ ทุกแถวเป็นเนื้อเดียวกันและอยู่ กึ่งกลางภายในองค์ประกอบแม่
สำหรับสิ่งนี้ควรใช้คุณสมบัติ align-content
ซึ่งจำเป็นสำหรับข้อความหลายบรรทัด
มาเขียนโค้ดของเราใหม่:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
คุณสมบัติ align-content รับค่า
เช่นเดียวกับ align-items
ค่า space-between
ลองดูตัวอย่างค่า
space-between กัน ตั้งค่าความสูง
ให้องค์ประกอบแม่เป็น 320px เนื่องจากเรามีสาม
แถว และมีสองระยะห่างระหว่าง
แถว ดังนั้นระยะห่างเหล่านี้จะเท่ากันแต่ละอัน
ที่ 10px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
ค่า stretch
ลองทดสอบค่า stretch
สำหรับสิ่งนี้ ให้ลบความสูงของลูกออก และตั้งค่า
ความสูงขององค์ประกอบแม่เป็น 600px เพื่อ
ให้เห็นผลชัดเจนขึ้น
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
ค่า stretch สำหรับ align-content คือ
ค่าเริ่มต้น ถ้าเราลบความสูง
ของลูกออกทั้งหมด ลบคุณสมบัติ align-content
แต่ปล่อยความสูงขององค์ประกอบแม่และ flex-wrap
ไว้ - ทุกอย่างจะทำงานเหมือนเดิม:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
แต่ถ้าเอา flex-wrap ออกด้วย
- ทุกอย่างจะกลายเป็นบรรทัดเดียว:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
พลิกแกน
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
เงื่อนไขพิเศษ
หากไม่มี flex-wrap: wrap จะไม่มีอะไรทำงาน แม้ว่า เราจะมีหนึ่งบรรทัด:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
เอา flex-wrap: wrap ออก - align-content: center จะหยุดทำงาน:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
