รายการCSS Flex
องค์ประกอบย่อย (รายการ)
อิลิเมนต์ลูกโดยตรงของคอนเทนเนอร์แบบยืดหยุ่นจะกลายเป็นรายการแบบยืดหยุ่น (flex) โดยอัตโนมัติ
1
2
3
4
องค์ประกอบด้านบนแสดงถึงไอเท็ม flex สีน้ำเงินสี่รายการภายในคอนเทนเนอร์ flex สีเทา
ตัวอย่าง
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
คุณสมบัติรายการแบบยืดหยุ่นคือ:
คำสั่งทรัพย์สิน
คุณสมบัติorderระบุลำดับของรายการแบบยืดหยุ่น
1
2
3
4
รายการ flex รายการแรกในโค้ดไม่จำเป็นต้องปรากฏเป็นรายการแรกในเค้าโครง
มูลค่าการสั่งซื้อต้องเป็นตัวเลข ค่าเริ่มต้นคือ 0
ตัวอย่าง
คุณสมบัติใบสั่งสามารถเปลี่ยนลำดับของรายการแบบยืดหยุ่นได้:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
The flex-grow คุณสมบัติ
คุณสมบัติflex-growระบุว่ารายการการทำงานแบบยืดหยุ่นเวลาจะเติบโตมากเพียงใดเมื่อเทียบกับรายการการทำงานแบบยืดหยุ่นเวลาที่เหลือ
1
2
3
ค่าต้องเป็นตัวเลข ค่าเริ่มต้นคือ 0
ตัวอย่าง
ทำให้รายการ flex ที่สามเติบโตเร็วกว่ารายการ flex อื่นๆ ถึงแปดเท่า:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
The flex-shrink คุณสมบัติ
คุณสมบัติflex-shrinkระบุว่ารายการการทำงานแบบยืดหยุ่นเวลาจะหดตัวมากเพียงใดเมื่อเทียบกับรายการแบบยืดหยุ่นเวลาที่เหลือ
1
2
3
4
5
6
7
8
9
10
ค่าต้องเป็นตัวเลข ค่าเริ่มต้นคือ 1
ตัวอย่าง
อย่าปล่อยให้รายการ flex ที่สามหดตัวมากเท่ากับรายการ flex อื่นๆ:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
คุณสมบัติพื้นฐานแบบยืดหยุ่น
คุณสมบัติระบุ ความflex-basisยาวเริ่มต้นของรายการแบบยืดหยุ่น
1
2
3
4
ตัวอย่าง
ตั้งค่าความยาวเริ่มต้นของรายการ flex ที่สามเป็น 200 พิกเซล:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
The flex Property
คุณสมบัติflexเป็นคุณสมบัติชวเลขสำหรับ
flex-grow, flex-shrink, และflex-basisคุณสมบัติ
ตัวอย่าง
ทำให้รายการ flex ที่สามไม่สามารถเติบโตได้ (0) ไม่สามารถย่อได้ (0) และด้วยความยาวเริ่มต้น 200 พิกเซล:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
The align-self ทรัพย์สิน
คุณสมบัติระบุ การalign-selfจัดตำแหน่งสำหรับรายการที่เลือกภายในคอนเทนเนอร์แบบยืดหยุ่น
คุณสมบัติalign-self จะแทนที่การจัดตำแหน่งเริ่มต้นที่กำหนดโดยalign-itemsคุณสมบัติ ของคอนเทนเนอร์
1
2
3
4
ในตัวอย่างเหล่านี้ เราใช้คอนเทนเนอร์สูง 200 พิกเซล เพื่อแสดง
align-selfคุณสมบัติได้ดียิ่งขึ้น:
ตัวอย่าง
จัดตำแหน่งรายการ flex ที่สามตรงกลางคอนเทนเนอร์:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
ตัวอย่าง
จัดตำแหน่งรายการ flex ที่สองที่ด้านบนของคอนเทนเนอร์ และจัดตำแหน่งรายการ flex ที่สามที่ด้านล่างของคอนเทนเนอร์:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
คุณสมบัติรายการ CSS Flexbox
ตารางต่อไปนี้แสดงรายการคุณสมบัติ CSS Flexbox Items ทั้งหมด:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |