CSS3 กล่องที่มีความยืดหยุ่น

CSS3 ยืดหยุ่น Box เป็นโหมดรูปแบบใหม่

วัตถุประสงค์ของการแนะนำรูปแบบการจัดวางกระเป๋าที่มีความยืดหยุ่นคือการให้วิธีที่มีประสิทธิภาพมากขึ้นในการจัดให้มีภาชนะย่อยองค์ประกอบการจัดตำแหน่งและการกระจายของพื้นที่ว่างเปล่า

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน

ทันทีหลังจากที่เบราว์เซอร์จำนวน -webkit- หรือ -moz- คำนำหน้าระบุ

เนื้อหาที่มีความยืดหยุ่น CSS3 กล่อง

กล่องที่มีความยืดหยุ่นที่ทำจากภาชนะยืดหยุ่น (flex ภาชนะ) และยืดหยุ่นองค์ประกอบย่อย (รายการ Flex) ส่วนประกอบ

ภาชนะยืดหยุ่นโดยการตั้งค่าคุณสมบัติจอแสดงผลเป็นแบบอินไลน์หรือ Flex-Flex จะได้รับการกำหนดให้เป็นภาชนะที่มีความยืดหยุ่น

ภาชนะยืดหยุ่นมีหนึ่งหรือความยืดหยุ่นมากขึ้นองค์ประกอบย่อย

หมายเหตุ: ภาชนะนอกยืดหยุ่นและองค์ประกอบยืดหยุ่นเป็นลูกของการแสดงผลปกติ กล่องที่มีความยืดหยุ่นกำหนดเพียง แต่วิธีการยืดหยุ่นองค์ประกอบของเด็กที่อยู่ในรูปแบบของคอนเทนเนอร์ที่ยืดหยุ่น

มีความยืดหยุ่นองค์ประกอบย่อยมักจะปรากฏในกล่องสายยางยืด โดยค่าเริ่มต้นในแต่ละภาชนะเป็นเพียงหนึ่งบรรทัด

ต่อไปนี้จะแสดงให้เห็นถึงองค์ประกอบยืดหยุ่นองค์ประกอบของเด็กจะแสดงในหนึ่งบรรทัดซ้ายไปขวา:

แน่นอนว่าเราสามารถปรับเปลี่ยนการจัดเรียง

ถ้าเราตั้งค่า direction คุณสมบัติการ rtl (ขวาไปซ้าย) จัดยืดหยุ่นองค์ประกอบย่อยจะมีการเปลี่ยนแปลงรูปแบบการเปลี่ยนแปลงหน้ายังตาม:

ดิ้นทิศทาง

flex-direction เพื่อระบุยืดหยุ่นองค์ประกอบย่อยในภาชนะแม่

ไวยากรณ์

flex-direction: row | row-reverse | column | column-reverse

flex-direction ค่า ได้แก่ :

• แถว: ขวางจากซ้ายไปขวา (ซ้าย) จัดเริ่มต้น
• แถวกลับ: reverse ชิดด้านข้าง (ขวาธรรมไปข้างหน้าจากแถวหลังคนสุดท้ายที่อยู่ด้านบน
• คอลัมน์: จัดเรียงในแนวตั้ง
• คอลัมน์ย้อนกลับ: ย้อนกลับการจัดเรียงในแนวตั้งจากแถวหลังไปข้างหน้าและในที่สุดก็แถวที่ด้านบน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง row-reverse ใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง column ที่ใช้:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง column-reverse ใช้งาน:

แอตทริบิวต์ปรับเนื้อหา

การจัดเรียงเนื้อหา (ปรับเนื้อหา) ที่มีต่อสมบัติยืดหยุ่นของภาชนะโปรแกรมที่ยืดหยุ่นรายการภาชนะยืดหยุ่นสอดคล้องตามแกนหลัก (แกนหลัก)

ไวยากรณ์ปรับเนื้อหาดังต่อไปนี้:

justify-content: flex-start | flex-end | center | space-between | space-around

แต่ละการวิเคราะห์ค่า:

• เฟล็กซ์เริ่มต้น:
  

  โครงการมีความยืดหยุ่นในบรรทัดแรกติดกับไส้ นี้จะเริ่มต้น ครั้งแรกหลักเริ่มต้นจากขอบด้านนอกของรายการที่ยืดหยุ่นจะอยู่ในขอบหลักเริ่มต้นของเส้นและล้างตามมาในการเปิดวางระยะยืดหยุ่น

• Flex-End:
  

  โครงการความยืดหยุ่นในการจุดสิ้นสุดของบรรทัดถัดบรรจุ ครั้งแรกที่รายการหลักสิ้นจากนอกยางยืดจะอยู่ในขอบหลักจุดสิ้นสุดของบรรทัดและล้างตามมาในการเปิดวางระยะยืดหยุ่น

• ศูนย์:
  

  โครงการที่มีความยืดหยุ่นเป็นศูนย์กลางในการกรอกข้อมูลต่อไป (หากพื้นที่ว่างที่เหลือเป็นลบโครงการนี้ก็จะล้นความยืดหยุ่นในทั้งสองทิศทาง)

• พื้นที่ระหว่าง:
  

  โครงการที่มีความยืดหยุ่นกระจายอย่างสม่ำเสมอบนแถว หากพื้นที่เป็นลบหรือเป็นเพียงระยะยืดหยุ่นเทียบเท่ามูลค่าให้กับเฟล็กซ์เริ่มต้น มิฉะนั้นหลักเริ่มต้นจากขอบด้านนอกของแถวแรกและแนวร่วมรายการยืดหยุ่นในขณะที่สายหลักสิ้นและอัตราอดิเรกสุดท้ายแนวร่วมระยะยืดหยุ่นและการกระจายของรายการที่เหลือในบรรทัดยืดหยุ่นที่อยู่ติดกัน รายการที่มีระยะห่างเท่า ๆ กัน

• พื้นที่รอบ ๆ
  

  โครงการที่มีความยืดหยุ่นกระจายอย่างสม่ำเสมอบนเส้นทั้งสองข้างของซีกซ้ายของพื้นที่ หากพื้นที่เป็นลบหรือเป็นเพียงระยะยืดหยุ่นค่าเท่ากับศูนย์ มิฉะนั้นความยืดหยุ่นของโครงการตามแนวการกระจายอย่างเท่าเทียมกันและมีระยะห่างจากแต่ละอื่น ๆ (เช่นเป็น 20px) ในขณะที่ออกครึ่งหนึ่งของช่วงเวลา (1/2 * 20px 10px =) ระหว่างหัวและหางทั้งสองด้านและภาชนะที่มีความยืดหยุ่น

เค้าแสดง:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง flex-end การใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง center การใช้ 'S:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง space-between การใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง space-around ใช้:

สถานที่ให้บริการจัดรายการที่

align-items ตั้งหรือเรียกองค์ประกอบยืดหยุ่นบนด้านข้างของแกนกล่อง (แกนแนวตั้ง) ทิศทางของการจัดตำแหน่ง

ไวยากรณ์

align-items: flex-start | flex-end | center | baseline | stretch

แต่ละการวิเคราะห์ค่า:

• เฟล็กซ์เริ่มต้น: ด้านเขตแดนขององค์ประกอบกล่องแกนยืดหยุ่น (แกนแนวตั้ง) กับตำแหน่งเริ่มต้นของแกนของด้านสดของขอบเขตเส้นเริ่มต้นที่
• Flex-End: ยืดหยุ่นด้านเขตแดนของแกนองค์ประกอบกล่อง (แกนแนวตั้ง) กับตำแหน่งเริ่มต้นที่จะอยู่เพลาท้ายด้านข้างของเส้นเขตแดน
• Center: ยืดหยุ่นกล่ององค์ประกอบที่วางอยู่ตรงกลางของแกนเส้นฝั่ง (แกนแนวตั้ง) บน (ถ้ามีขนาดที่เล็กกว่าขนาดของสายการยืดหยุ่นขององค์ประกอบกล่องมันเป็นระยะเวลาเดียวกันในทั้งสองทิศทางล้น)
• พื้นฐาน: องค์ประกอบกล่องเช่นเพลาและสายยางยืดด้านเพลาเดียวกันค่า 'ดิ้นเริ่มต้น' เทียบเท่า ในกรณีอื่น ๆ ค่าที่จะมีส่วนร่วมในการจัดตำแหน่งพื้นฐาน
• ยืด: ถ้าขนาดของกล่องขอบแอตทริบิวต์ระบุขนาดของด้านข้างของเพลาที่เป็น 'อัตโนมัติ' ค่าของมันจะใกล้เคียงกับรายการโฆษณาขนาด แต่จะเป็นไปตาม 'min max / กว้าง / สูง' คุณสมบัติ ข้อ จำกัด

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง stretch(默认值) การใช้:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง flex-start ใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง flex-end การใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง center การใช้ 'S:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง baseline การใช้งาน:

คุณสมบัติ Flex-ห่อ

แอตทริบิวต์Flex-ห่อถูกใช้เพื่อระบุกล่องยืดหยุ่นโหมดห่อองค์ประกอบของเด็ก

ไวยากรณ์

flex-flow:  || 

แต่ละการวิเคราะห์ค่า:

• nowrap - โดยค่าเริ่มต้นภาชนะยืดหยุ่นเป็นเส้นเดียวในกรณีนี้เด็กมีความยืดหยุ่นอาจล้นภาชนะ
• ห่อ - ภาชนะยืดหยุ่นหลายบรรทัดส่วนล้นของเด็กที่มีความยืดหยุ่นอยู่ในกรณีนี้กับสายใหม่แบ่งบรรทัดจะเกิดขึ้นภายในคีย์ย่อย
• ห่อย้อนกลับ - สั่งซื้อห่อย้อนกลับ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง nowrap ใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง wrap การใช้งาน:

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง wrap-reverse ใช้งาน:

แอตทริบิวต์จัดเนื้อหา

align-content แอตทริบิวต์ที่ใช้ในการปรับเปลี่ยน flex-wrap พฤติกรรมแอตทริบิวต์ ที่คล้ายกัน align-items แต่มันก็ไม่ได้ตั้งค่าการจัดตำแหน่งของยืดหยุ่นองค์ประกอบย่อย แต่ตั้งการจัดตำแหน่งของแต่ละแถว

ไวยากรณ์

align-content: flex-start | flex-end | center | space-between | space-around | stretch

แต่ละการวิเคราะห์ค่า:

• stretch - เริ่มต้น แต่ละบรรทัดจะมีการยืดเพื่อครอบครองพื้นที่ที่เหลือ
• flex-start - แถวของกล่องซ้อนกันตำแหน่งเริ่มต้นของภาชนะที่ยืดหยุ่น
• flex-end - แถวของกล่องซ้อนกันตำแหน่งสิ้นสุดของภาชนะที่ยืดหยุ่น
• center - แถวของกล่องซ้อนไปยังตำแหน่งที่ตรงกลางของภาชนะยืดหยุ่น
• space-between - ภาชนะบรรจุถุงที่มีความยืดหยุ่นแต่ละแถวกระจายอย่างสม่ำเสมอ
• space-around - แต่ละบรรทัดในภาชนะบรรจุถุงที่มีความยืดหยุ่นกระจายอย่างเท่าเทียมกันระหว่างปลายทั้งสองข้างเพื่อรักษาครึ่งหนึ่งขององค์ประกอบย่อยและองค์ประกอบย่อยขนาดระยะห่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง center การใช้ 'S:

คุณลักษณะองค์ประกอบย่อยที่มีความยืดหยุ่น

ลำดับ

ไวยากรณ์

order: 

แต่ละการวิเคราะห์ค่า:

• <จำนวนเต็ม>: ค่าจำนวนเต็มใช้ในการกำหนดลำดับที่ค่าเล็ก ๆ ของพื้นผิวด้านบน มันอาจจะเป็นเชิงลบ

order ตั้งค่าคุณสมบัติในการยืดหยุ่นของคุณสมบัติยืดหยุ่นองค์ประกอบของเด็กภาชนะ:

เป็นเส้นตรง

การตั้งค่า "ขอบ" เป็น "อัตโนมัติ" ค่าโดยอัตโนมัติได้รับภาชนะยืดหยุ่นในพื้นที่ที่เหลือ ดังนั้นการตั้งค่าขอบแนวตั้งของ "อัตโนมัติ" จะช่วยให้ยืดหยุ่นองค์ประกอบย่อยจะเน้นอย่างสมบูรณ์ในทิศทางที่สองแกนของภาชนะที่ยืดหยุ่น

ตัวอย่างต่อไปนี้ในวันแรกองค์ประกอบย่อยยืดหยุ่นชุด margin-right: auto; พื้นที่ที่เหลือจะถูกวางในองค์ประกอบทางขวา:

ศูนย์ที่สมบูรณ์แบบ

ตัวอย่างต่อไปนี้จะเป็นโซลูชั่นที่สมบูรณ์แบบในการแก้ไขปัญหาที่เรามักจะพบศูนย์

กล่องยืดหยุ่น, ศูนย์กลายเป็นง่ายมากเพียงแค่ต้องการตั้งค่า margin: auto; สามารถทำให้ยืดหยุ่นย่อยองค์ประกอบในแนวแกนสองตรงกลางพอดี:

จัดตัวเอง

align-self แอตทริบิวต์ที่ใช้ในการกำหนดทิศทางของการจัดตำแหน่งขององค์ประกอบยืดหยุ่นตัวเองที่ด้านข้างของแกน (แกนแนวตั้ง)

ไวยากรณ์

align-self: auto | flex-start | flex-end | center | baseline | stretch

แต่ละการวิเคราะห์ค่า:

• อัตโนมัติ: ถ้า 'จัดตัวเอง' ค่า 'อัตโนมัติ' การคำนวณมูลค่าขององค์ประกอบหลักขององค์ประกอบ 'จัดรายการที่' ค่าถ้ามันไม่มีแม่ค่าคำนวณของ 'ยืด'
• เฟล็กซ์เริ่มต้น: ด้านเขตแดนขององค์ประกอบกล่องแกนยืดหยุ่น (แกนแนวตั้ง) กับตำแหน่งเริ่มต้นของแกนของด้านสดของขอบเขตเส้นเริ่มต้นที่
• Flex-End: ยืดหยุ่นด้านเขตแดนของแกนองค์ประกอบกล่อง (แกนแนวตั้ง) กับตำแหน่งเริ่มต้นที่จะอยู่เพลาท้ายด้านข้างของเส้นเขตแดน
• Center: ยืดหยุ่นกล่ององค์ประกอบที่วางอยู่ตรงกลางของแกนเส้นฝั่ง (แกนแนวตั้ง) บน (ถ้ามีขนาดที่เล็กกว่าขนาดของสายการยืดหยุ่นขององค์ประกอบกล่องมันเป็นระยะเวลาเดียวกันในทั้งสองทิศทางล้น)
• พื้นฐาน: องค์ประกอบกล่องเช่นเพลาและสายยางยืดด้านเพลาเดียวกันค่า 'ดิ้นเริ่มต้น' เทียบเท่า ในกรณีอื่น ๆ ค่าที่จะมีส่วนร่วมในการจัดตำแหน่งพื้นฐาน
• ยืด: ถ้าขนาดของกล่องขอบแอตทริบิวต์ระบุขนาดของด้านข้างของเพลาที่เป็น 'อัตโนมัติ' ค่าของมันจะใกล้เคียงกับรายการโฆษณาขนาด แต่จะเป็นไปตาม 'min max / กว้าง / สูง' คุณสมบัติ ข้อ จำกัด

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงความยืดหยุ่นองค์ประกอบย่อยจัดตัวเองผลการประยุกต์ใช้ค่าที่แตกต่าง:

ดิ้น

flex แอตทริบิวต์ถูกใช้เพื่อระบุวิธีการจัดสรรพื้นที่สำหรับยืดหยุ่นองค์ประกอบย่อย

ไวยากรณ์

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

แต่ละการวิเคราะห์ค่า:

• ไม่มี: คำหลักไม่มีการคำนวณเป็น: 0 0 อัตโนมัติ
• [Flex-เติบโต]: ความหมายขององค์ประกอบยืดหยุ่นอัตราส่วนการขยายตัวกล่อง
• [Flex-หด]: ความหมายขององค์ประกอบยืดหยุ่นอัตราการหดตัวกล่อง
• [Flex-พื้นฐาน]: ค่าอ้างอิงเริ่มต้นกำหนดองค์ประกอบยืดหยุ่นของกล่อง

ตัวอย่างต่อไปนี้เป็นครั้งแรกองค์ประกอบย่อยยืดหยุ่นครอง 2/4 ของพื้นที่อีกสองแต่ละ 1/4 พื้นที่:

ตัวอย่างเพิ่มเติม

สร้างหน้าเว็บที่ตอบสนองต่อการใช้กล่องยืดหยุ่น

CSS3 ยืดหยุ่นคุณสมบัติกล่อง

ตารางต่อไปนี้ที่ใช้กันทั่วไปไปยังกล่องในคุณสมบัติที่ยืดหยุ่น: