CSS Flex Container
องค์ประกอบหลัก (คอนเทนเนอร์)
เช่นเดียวกับที่เราระบุไว้ในบทที่แล้ว นี่คือคอนเทนเนอร์ แบบยืดหยุ่น (พื้นที่สีน้ำเงิน) ที่มีสามรายการ แบบยืดหยุ่น :
1
2
3
คอนเทนเนอร์แบบยืดหยุ่นจะยืดหยุ่นได้โดยการตั้งค่าdisplay
คุณสมบัติเป็น
flex
:
ตัวอย่าง
.flex-container {
display: flex;
}
คุณสมบัติของคอนเทนเนอร์แบบยืดหยุ่นคือ:
คุณสมบัติ flex-direction
คุณสมบัติflex-direction
กำหนดทิศทางที่คอนเทนเนอร์ต้องการซ้อนรายการแบบยืดหยุ่นเวลา
1
2
3
ตัวอย่าง
ค่าcolumn
สแต็ครายการดิ้นในแนวตั้ง (จากบนลงล่าง):
.flex-container {
display: flex;
flex-direction: column;
}
ตัวอย่าง
ค่าจะ จัดcolumn-reverse
เรียงรายการดิ้นในแนวตั้ง (แต่จากล่างขึ้นบน):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
ตัวอย่าง
ค่าจะ จัดrow
เรียงรายการ flex ในแนวนอน (จากซ้ายไปขวา):
.flex-container {
display: flex;
flex-direction: row;
}
ตัวอย่าง
ค่าrow-reverse
จะวางรายการ flex ในแนวนอน (แต่จากขวาไปซ้าย):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
The flex-wrap คุณสมบัติ
คุณสมบัติflex-wrap
ระบุว่ารายการ flex ควรห่อหรือไม่
ตัวอย่างด้านล่างมีรายการแบบยืดหยุ่น 12 รายการ เพื่อแสดง
flex-wrap
คุณสมบัติได้ ดียิ่งขึ้น
1
2
3
4
5
6
7
8
9
10
11
12
ตัวอย่าง
ค่าwrap
ระบุว่ารายการ flex จะห่อถ้าจำเป็น:
.flex-container {
display: flex;
flex-wrap: wrap;
}
ตัวอย่าง
ค่าnowrap
ระบุว่ารายการ flex จะไม่ตัด (นี่เป็นค่าเริ่มต้น):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
ตัวอย่าง
ค่าwrap-reverse
ระบุว่ารายการที่ยืดหยุ่นจะห่อหากจำเป็น ในลำดับที่กลับกัน:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
คุณสมบัติการไหลแบบยืดหยุ่น
คุณสมบัติflex-flow
เป็นคุณสมบัติชวเลขสำหรับการตั้งค่าทั้ง
flex-direction
และ
flex-wrap
คุณสมบัติ
ตัวอย่าง
.flex-container {
display: flex;
flex-flow: row wrap;
}
คุณสมบัติเนื้อหาที่สมเหตุสมผล
คุณสมบัติjustify-content
ใช้เพื่อจัดแนวรายการแบบยืดหยุ่น:
1
2
3
ตัวอย่าง
ค่าcenter
จะจัดเรียงรายการแบบยืดหยุ่นที่กึ่งกลางของคอนเทนเนอร์:
.flex-container {
display: flex;
justify-content: center;
}
ตัวอย่าง
ค่าflex-start
จะจัดเรียงรายการ flex ที่จุดเริ่มต้นของคอนเทนเนอร์ (ซึ่งเป็นค่าเริ่มต้น):
.flex-container {
display: flex;
justify-content: flex-start;
}
ตัวอย่าง
ค่าflex-end
จะจัดเรียงรายการแบบยืดหยุ่นที่ส่วนท้ายของคอนเทนเนอร์:
.flex-container {
display: flex;
justify-content: flex-end;
}
ตัวอย่าง
ค่าspace-around
แสดงรายการ flex โดยเว้นวรรคก่อน ระหว่าง และหลังบรรทัด:
.flex-container {
display: flex;
justify-content: space-around;
}
ตัวอย่าง
ค่าspace-between
แสดงรายการแบบยืดหยุ่นพร้อมช่องว่างระหว่างบรรทัด:
.flex-container {
display: flex;
justify-content: space-between;
}
The align-items คุณสมบัติ
คุณสมบัติalign-items
นี้ใช้เพื่อจัดแนวรายการแบบยืดหยุ่น
1
2
3
ในตัวอย่างเหล่านี้ เราใช้คอนเทนเนอร์สูง 200 พิกเซล เพื่อแสดง
align-items
คุณสมบัติได้ ดียิ่งขึ้น
ตัวอย่าง
ค่าcenter
จะจัดเรียงรายการ flex ตรงกลางคอนเทนเนอร์:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
ตัวอย่าง
ค่าflex-start
จะจัดเรียงรายการ flex ที่ด้านบนของคอนเทนเนอร์:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
ตัวอย่าง
ค่าflex-end
จะจัดเรียงรายการ flex ที่ด้านล่างของคอนเทนเนอร์:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
ตัวอย่าง
ค่าstretch
จะขยายรายการ flex เพื่อเติมคอนเทนเนอร์ (ซึ่งเป็นค่าเริ่มต้น):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
ตัวอย่าง
ค่าbaseline
จะจัดแนวรายการแบบยืดหยุ่น เช่น การจัดแนวเส้นฐาน:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
หมายเหตุ:ตัวอย่างใช้ขนาดฟอนต์ต่างกันเพื่อแสดงให้เห็นว่ารายการได้รับการจัดแนวตามข้อความพื้นฐาน:
1
2
3
คุณสมบัติการจัดตำแหน่งเนื้อหา
คุณสมบัติalign-content
นี้ใช้เพื่อจัดแนวเส้นดิ้น
1
2
3
4
5
6
7
8
9
10
11
12
ในตัวอย่างเหล่านี้ เราใช้คอนเทนเนอร์สูง 600 พิกเซล โดย
flex-wrap
ตั้งค่าคุณสมบัติเป็นwrap
เพื่อแสดงalign-content
คุณสมบัติได้ ดียิ่งขึ้น
ตัวอย่าง
ค่าspace-between
จะแสดงเส้นยืดหยุ่นที่มีช่องว่างระหว่างกัน:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
ตัวอย่าง
ค่าspace-around
จะแสดงเส้นยืดหยุ่นพร้อมช่องว่างก่อน ระหว่าง และหลังเส้น:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
ตัวอย่าง
ค่าstretch
จะยืดเส้นยืดหยุ่นเพื่อใช้พื้นที่ที่เหลือ (ซึ่งเป็นค่าเริ่มต้น):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
ตัวอย่าง
ค่า ที่center
แสดงจะแสดงเส้นยืดหยุ่นตรงกลางคอนเทนเนอร์:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
ตัวอย่าง
ค่าflex-start
จะแสดงเส้นยืดหยุ่นที่จุดเริ่มต้นของคอนเทนเนอร์:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
ตัวอย่าง
ค่าflex-end
จะแสดงเส้นยืดหยุ่นที่ส่วนท้ายของคอนเทนเนอร์:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
การจัดตำแหน่งที่สมบูรณ์แบบ
ในตัวอย่างต่อไปนี้ เราจะแก้ปัญหาเกี่ยวกับรูปแบบที่พบได้ทั่วไป: การจัดกึ่งกลางที่สมบูรณ์แบบ
วิธีแก้ปัญหา :ตั้งค่าทั้ง the justify-content
และalign-items
properties เป็น
center
และรายการ flex จะถูกจัดให้อยู่กึ่งกลางอย่างสมบูรณ์:
ตัวอย่าง
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
คุณสมบัติ CSS Flexbox Container
ตารางต่อไปนี้แสดงรายการคุณสมบัติ CSS Flexbox Container ทั้งหมด:
Property | Description |
---|---|
align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
display | Specifies the type of box used for an HTML element |
flex-direction | Specifies the direction of the flexible items inside a flex container |
flex-flow | A shorthand property for flex-direction and flex-wrap |
flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |