CSS3 Flexbox
กล่องที่มีความยืดหยุ่นหรือ flexbox เป็นโหมดรูปแบบใหม่ใน CSS3
การใช้งานของ flexbox เพื่อให้แน่ใจว่าองค์ประกอบประพฤติไม่คาดฝันเมื่อเค้าโครงหน้าต้องรองรับขนาดหน้าจอที่แตกต่างกันและอุปกรณ์แสดงผลที่แตกต่างกัน
สำหรับการใช้งานหลายรูปแบบกล่องที่มีความยืดหยุ่นให้การปรับปรุงกว่ารุ่นบล็อกในการที่จะไม่ได้ใช้ลอยไม่ทำขอบภาชนะดิ้นของการล่มสลายที่มีอัตรากำไรของเนื้อหา
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่คุณลักษณะ
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox แนวคิด
Flexbox ประกอบด้วยภาชนะดิ้นดิ้นและรายการ
ภาชนะดิ้นถูกประกาศโดยการตั้งค่า display ทรัพย์สินขององค์ประกอบทั้ง flex (กลายเป็นบล็อก) หรือ inline-flex (แสดงผลเป็นแบบอินไลน์)
ภายในภาชนะดิ้นมีอย่างน้อยหนึ่งรายการดิ้น
หมายเหตุ: ทุกอย่างนอกภาชนะดิ้นและภายในรายการเฟล็กซ์ที่มีการแสดงตามปกติ flexbox กำหนดวิธีรายการดิ้นออกมาวางไว้ภายในภาชนะดิ้น
รายการดิ้นอยู่ในตำแหน่งที่อยู่ภายในภาชนะดิ้นตามแนวเส้นดิ้น โดยค่าเริ่มต้นมีเพียงหนึ่งบรรทัดดิ้นดิ้นต่อตู้คอนเทนเนอร์
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสามรายการดิ้น พวกเขาอยู่ในตำแหน่งที่เป็นค่าเริ่มต้น: ตามแนวดิ้นแนวนอนจากซ้ายไปขวา:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>นอกจากนี้ยังเป็นไปได้ที่จะเปลี่ยนทิศทางของเส้นโค้ง
ถ้าเราตั้งค่า direction คุณสมบัติการ rtl (ขวาไปซ้าย) ข้อความจะถูกดึงจากขวาไปซ้ายและเส้นดิ้นเปลี่ยนทิศทางซึ่งจะเปลี่ยนรูปแบบหน้า:
ตัวอย่าง
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} ทิศทาง Flex
flex-direction คุณสมบัติระบุทิศทางของรายการที่มีความยืดหยุ่นภายในภาชนะดิ้น ค่าเริ่มต้นของ flex-direction เป็น row (จากซ้ายไปขวาบนลงล่าง)
ค่าอื่น ๆ มีดังนี้
-
row-reverse- หากการเขียนโหมด (ทิศทาง) จะซ้ายไปขวารายการดิ้นจะถูกวางออกขวาไปซ้าย -
column- หากระบบการเขียนเป็นแนวนอนดิ้นรายการจะออกมาวางในแนวตั้ง -
column-reverse- เหมือนกับคอลัมน์ แต่กลับรายการ
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ row-reverse ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ column คุ้มค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ column-reverse ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} สถานที่ให้บริการปรับเนื้อหา
justify-content คุณสมบัติในแนวนอนสอดคล้องรายการภาชนะที่มีความยืดหยุ่นเมื่อรายการที่ไม่ได้ใช้พื้นที่ที่มีอยู่ทั้งหมดในแกนหลัก
ค่าที่เป็นไปได้ดังนี้
-
flex-start- ค่าเริ่มต้น รายการที่อยู่ในตำแหน่งที่จุดเริ่มต้นของภาชนะ -
flex-end- รายการที่อยู่ในตำแหน่งที่ส่วนท้ายของภาชนะ -
center- รายการที่อยู่ในตำแหน่งที่เป็นศูนย์กลางของภาชนะ -
space-between- รายการที่อยู่ในตำแหน่งที่มีช่องว่างระหว่างบรรทัด -
space-around- รายการที่อยู่ในตำแหน่งที่มีพื้นที่ก่อนระหว่างและหลังจากเส้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ flex-end ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ center ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ space-between ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ space-around คุ้มค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} จัด-รายการทรัพย์สิน
align-items คุณสมบัติสอดคล้องแนวตั้งรายการภาชนะที่มีความยืดหยุ่นเมื่อรายการที่ไม่ได้ใช้พื้นที่ที่มีอยู่ทั้งหมดในแกนข้าม
ค่าที่เป็นไปได้ดังนี้
-
stretch- ค่าเริ่มต้น รายการที่จะขยายให้พอดีกับภาชนะ -
flex-start- รายการที่อยู่ในตำแหน่งที่ด้านบนของภาชนะ -
flex-end- รายการที่อยู่ในตำแหน่งที่ด้านล่างของภาชนะ -
center- รายการที่อยู่ในตำแหน่งที่เป็นศูนย์กลางของภาชนะ (แนวตั้ง) -
baseline- รายการที่อยู่ในตำแหน่งที่ baseline ของภาชนะ
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ stretch ค่า (นี่เป็นค่าเริ่มต้น):
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ flex-start ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ flex-end ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ center ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ baseline ความคุ้มค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} ดิ้นห่อทรัพย์สิน
flex-wrap ทรัพย์สินระบุว่ารายการดิ้นควรตัดหรือไม่ถ้าไม่มีที่ว่างพอสำหรับพวกเขาในบรรทัดดิ้นหนึ่ง
ค่าที่เป็นไปได้ดังนี้
-
nowrap- ค่าเริ่มต้น รายการที่มีความยืดหยุ่นจะไม่ตัด -
wrap- รายการที่มีความยืดหยุ่นจะตัดในกรณีที่จำเป็น -
wrap-reverse- รายการที่มีความยืดหยุ่นจะตัดถ้าจำเป็นเพื่อย้อนกลับ
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ nowrap ค่า (นี่เป็นค่าเริ่มต้น):
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ wrap มูลค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ wrap-reverse ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} สถานที่ให้บริการจัดเนื้อหา
align-content คุณสมบัติปรับเปลี่ยนพฤติกรรมของ flex-wrap ทรัพย์สิน มันคล้ายกับ align-items แต่แทนที่จะสอดคล้องรายการดิ้นมันสอดคล้องสายดิ้น
ค่าที่เป็นไปได้ดังนี้
-
stretch- ค่าเริ่มต้น เส้นยืดจะใช้พื้นที่ที่เหลือ -
flex-start- เส้นจะถูกบรรจุไปยังจุดเริ่มต้นของภาชนะดิ้น -
flex-end- สายจะเต็มไปต่อท้ายของภาชนะดิ้น -
center- สายจะเต็มไปยังศูนย์กลางของภาชนะดิ้น -
space-between- สายมีการกระจายอย่างเท่าเทียมกันในภาชนะดิ้น -
space-around- สายมีการกระจายอย่างเท่าเทียมกันในภาชนะดิ้นมีช่องว่างขนาดเพียงครึ่งหนึ่งที่ปลายทั้ง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลของการใช้ที่ center ค่า:
ตัวอย่าง
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} คุณสมบัติของรายการ Flex
การสั่งซื้อ
order คุณสมบัติที่ระบุลำดับของรายการญาติที่มีความยืดหยุ่นกับส่วนที่เหลือของรายการที่มีความยืดหยุ่นในภาชนะเดียวกัน:
ตัวอย่าง
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} ขอบ
การตั้งค่า margin: auto; จะดูดซับพื้นที่พิเศษ มันสามารถนำมาใช้ในการผลักดันรายการดิ้นเข้าไปอยู่ในตำแหน่งที่แตกต่างกัน
ในตัวอย่างต่อไปนี้เราตั้ง margin-right: auto; ในรายการเฟล็กซ์ครั้งแรก นี้จะทำให้ทุกพื้นที่พิเศษจะถูกดูดซึมไปทางขวาขององค์ประกอบว่า:
ตัวอย่าง
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} ตรงกลางที่สมบูรณ์แบบ
ในตัวอย่างต่อไปนี้เราจะแก้ปัญหาที่เกิดขึ้นเกือบทุกวัน: ศูนย์กลางที่สมบูรณ์แบบ
มันเป็นเรื่องง่ายมากกับ flexbox การตั้งค่า margin: auto; จะทำให้รายการที่ตรงกลางพอดีในแกนทั้งสอง:
ตัวอย่าง
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} จัดตัวเอง
align-self ทรัพย์สินของรายการดิ้นแทนที่คุณสมบัติจัดรายการ-Container ดิ้นสำหรับรายการที่ มันมีค่าที่เป็นไปเช่นเดียวกับ align-items คุณสมบัติ
ตัวอย่างต่อไปนี้กำหนดค่าจัดตัวเองที่แตกต่างกันไปแต่ละรายการ Flex:
ตัวอย่าง
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} ดิ้น
flex คุณสมบัติระบุความยาวของรายการดิ้นเมื่อเทียบกับส่วนที่เหลือของรายการดิ้นในภาชนะเดียวกัน
ในตัวอย่างต่อไปนี้รายการดิ้นครั้งแรกจะใช้ 2/4 ของพื้นที่ว่างและอีกสองรายการดิ้นจะใช้ 1/4 ของพื้นที่ว่างแต่ละ
ตัวอย่าง
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
ตัวอย่างเพิ่มเติม
สร้างเว็บไซต์ที่ตอบสนองกับ flexbox
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างรูปแบบเว็บไซต์ที่ตอบสนองกับ flexbox
CSS3 คุณสมบัติ flexbox
ตารางต่อไปนี้แสดงคุณสมบัติ CSS ที่ใช้กับ flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| 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 |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |