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-itemsproperties เป็น
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 |