องค์ประกอบแบบยืดหยุ่น แทบ zastosuvannya FlexBox คำพูดเหมือนร่องรอยของความทรงจำ

วิธีการทำงานของ CSS Flexbox: การแนะนำเลย์เอาต์ขององค์ประกอบทางเว็บครั้งแรก

การคลิกแบบ Flexbox ทำให้เราพลาดส่วนเล็กๆ น้อยๆ ของ CSS ล้วนๆ (เช่น การเลื่อนในแนวตั้ง) และสิ่งเหล่านี้ก็ทำงานได้อย่างยอดเยี่ยม Ale razіbratisyaในหลักการของหุ่นยนต์โยคะเป็นเวลาหนึ่งชั่วโมงจะคล่องแคล่วโดยเฉพาะอย่างยิ่งถ้าคุณเป็นมือใหม่

งานหลักของ Flexbox คือการสร้างลูกบอลด้วย gnuchki และทำงานกับพวกมัน - เข้าใจได้ง่าย เพื่อให้บรรลุเป้าหมายในการติดฉลากไวน์ เราจึงอนุญาตให้ปรับเปลี่ยนคอนเทนเนอร์ตามลักษณะการทำงานกับองค์ประกอบย่อย ซึ่งรวมถึงการเปลี่ยนขนาดและการเปลี่ยนแปลงระหว่างไวน์เหล่านี้

ฟังดูไม่เลว แต่ลองมาแปลกใจว่าในทางปฏิบัติมันราบรื่นเพียงใด ในบทความนี้ เรามีพาวเวอร์ Flexbox ที่ได้รับความนิยมสูงสุด 9 อย่าง มาดูกันว่าอันไหนที่มีกลิ่นเหม็น ซึ่งตัวที่เหม็นนั้นได้ผลจริงๆ

จอแสดงผล: Flex

ด้านก้นของแกน:

เรามี 4 สีที่แตกต่างกัน การขยายที่แตกต่างกันซึ่งควรอยู่ตรงกลางของ div สีเทา การแสดงพลังของสกิน div: block . ดังนั้นสี่เหลี่ยมหนังจึงใช้ความกว้างทั้งหมดของแถว

ในการเริ่มต้นใช้งาน Flexbox เราจำเป็นต้องขยายคอนเทนเนอร์ของเราด้วยคอนเทนเนอร์แบบยืดหยุ่น ต่อสู้เช่นนี้:

#container (จอแสดงผล: flex;)

ไม่มีอะไรเปลี่ยนแปลงเป็นพิเศษ - div ไม่ได้อยู่ติดกันอีกต่อไป เอล คุณทำงานหนักมาก คุณได้ให้คลาสกำลังแก่สแควร์ของคุณ ซึ่งเรียกว่า "บริบทแบบยืดหยุ่น"

ทิศทางแบบยืดหยุ่น

คอนเทนเนอร์แบบยืดหยุ่นมีสองแกน: ส่วนหัวทั้งหมดตั้งฉากกับ th

ด้านหลังล็อควัตถุทั้งหมดจะน่าระทึกใจบนแกนหลัก: ชั่วร้ายไปทางขวา ดังนั้นสี่เหลี่ยมของเราจึงกลายเป็นเส้นตรง ถ้าเราเปลี่ยน display: flex . อย่างไรก็ตาม ทิศทางการโค้งงอช่วยให้ศีรษะสามารถหมุนได้

#container ( display: flex; flex-direction: คอลัมน์; )

สิ่งสำคัญคือต้องสังเกตว่า flex-direction: คอลัมน์ไม่ส่งผลต่อสี่เหลี่ยมตามแกนที่ตั้งฉากกับส่วนหัว ส่วนหัวกำลังเปลี่ยน roztashuvannya และตอนนี้ถูกยืดให้ตรงไปที่ด้านล่าง

กำลังมากขึ้นสำหรับทิศทางการโค้งงอ: row-reverse และ column-reverse

ปรับเนื้อหา

Justify-เนื้อหาที่ตรงกันสำหรับการแสดงองค์ประกอบบนแกนหัว

หมุนเป็นทิศทางดิ้น: แถว

#container ( display: flex; flex-direction: row; justify-content: flex-start; )

Justify-content สามารถรับ 5 ค่า:

1. ดิ้นเริ่มต้น;
2. เฟล็กซ์;
3. ศูนย์;
4. ช่องว่างระหว่าง;
5. พื้นที่รอบ ๆ .

Space-between กำหนดช่องว่างเดียวกันระหว่างช่องสี่เหลี่ยม แต่ไม่ใช่ระหว่างภาชนะและช่องสี่เหลี่ยม Space-around ยังกำหนดระยะห่างระหว่างช่องสี่เหลี่ยมเท่ากัน แต่ตอนนี้อยู่ระหว่างภาชนะกับช่องสี่เหลี่ยม และครึ่งหนึ่งของช่องสี่เหลี่ยมระหว่างช่องสี่เหลี่ยม

จัดรายการ

ในขณะที่ justify-content ทำงานบนแกน head align-items ทำงานบนแกนตั้งฉากกับแกน head

ย้อนกลับไปที่ flex-direction: row และผ่านคำสั่ง align-items:

1. ดิ้นเริ่มต้น;
2. เฟล็กซ์;
3. ศูนย์;
4. ยืด;
5. พื้นฐาน

โปรดทราบว่าสำหรับการจัดตำแหน่งรายการ: ยืดความสูงของช่องสี่เหลี่ยมเนื่องจาก auto สำหรับ align-items: ไม่จำเป็นต้องล้างแท็กย่อหน้าพื้นฐาน มิฉะนั้น คุณจะเห็นดังนี้:

เพื่อให้เข้าใจถึงวิธีการทำงานของแกนได้ดียิ่งขึ้น เราจึงรวม justify-content เข้ากับ align-items และอัศจรรย์ใจกับวิธีที่เราทำงานที่จุดศูนย์กลางของพลังการดิ้นสองทิศทาง:

จัดตัวเอง

Align-self ช่วยให้คุณสามารถจัดองค์ประกอบ okremo ได้

#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // เฉพาะสี่เหลี่ยมนี้เท่านั้นที่จะจัดกึ่งกลาง

มาทำ align-self สำหรับสี่เหลี่ยมสองช่อง และทำ align-items: center และ flex-direction: row สำหรับช่องอื่น

พื้นฐานแบบยืดหยุ่น

พื้นฐานการทำงานแบบยืดหยุ่นจะขึ้นอยู่กับลำดับขององค์ประกอบ หน่วยงานอื่นของ Flexbox จะเปลี่ยนแปลงรายการแรกและรายการสุดท้าย:

พื้นฐานแบบยืดหยุ่นจะฝังการขยายตัวขององค์ประกอบในแกนหลัก

สงสัยว่าจะเกิดอะไรขึ้นเมื่อเราเปลี่ยนแกนหัวตรงไปข้างหน้า:

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

Flex Grow

Tsya vlastіvіst trohi foldіsha.

สำหรับซัง ให้สี่เหลี่ยมของเรามีความกว้าง 120px เท่ากัน:

สำหรับการจับภาพ ค่า flex-grow คือ 0 Ze หมายความว่าสี่เหลี่ยมจัตุรัสมีรั้วล้อมรอบ (ใช้พื้นที่ในคอนเทนเนอร์)

มาลองตั้งค่า flex-grow 1 สำหรับสกินสแควร์กัน:

สี่เหลี่ยมถูกครอบครองโดยภาชนะ ค่า flex-grow จะแทนที่ค่าความกว้าง

แต่สิ่งหนึ่งที่ต้องตำหนิ: flex-grow: 1 หมายถึงอะไร

ลองตั้งค่า flex-grow ให้เท่ากับ 999:

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

Tse หมายความว่า มันไม่สำคัญ เหมือนความหมายของ flex-grow สำคัญ เหมือนมันสัมพันธ์กับช่องสี่เหลี่ยมอื่น ๆ :

ด้านหลังของสี่เหลี่ยมผิวที่ยืดหยุ่นได้คือ 1 ผลรวมของความกว้างคือ 6 นอกจากนี้ ภาชนะของเรายังแบ่งออกเป็น 6 ส่วน สี่เหลี่ยมหนังใช้พื้นที่ 1/6 ของพื้นที่ว่างในคอนเทนเนอร์

ถ้า flex-grow ของสี่เหลี่ยมจัตุรัสที่สามกลายเป็น 2 คอนเทนเนอร์จะถูกแบ่งออกเป็น 7 ส่วน (1+1+2+1+1+1)

ตอนนี้สี่เหลี่ยมจัตุรัสที่สามใช้พื้นที่ 2/7 ของพื้นที่ reshta - 1/7 ต่อช่อง

โปรดทราบว่า flex-grow ใช้ได้กับแกนหลักเท่านั้น (จนกว่าเราจะเปลี่ยนโดยตรง)

หดตัวแบบยืดหยุ่น

Flex-shrink - การแพร่กระจายโดยตรงของ flex-grow Vono หมายถึงขนาดของจัตุรัสสามารถเปลี่ยนแปลงได้ที่rozmіrі

การหดตัวแบบยืดหยุ่นจะได้รับการสั่นสะเทือนหากองค์ประกอบไม่พอดีกับภาชนะ

คุณมีความหมายว่าองค์ประกอบอาจเปลี่ยนแปลงที่ rozmirah และจามรี - ไม่ ตามค่าเริ่มต้น ค่าการหดตัวแบบยืดหยุ่นสำหรับสี่เหลี่ยมสกินคือ 1 ซึ่งหมายความว่าสี่เหลี่ยมจัตุรัสจะหดตัวเมื่อคอนเทนเนอร์เปลี่ยนไป

ตั้งค่า flex-grow และ flex-shrink เท่ากับ 1:

ตอนนี้ มาเปลี่ยนค่าการย่อขนาดสำหรับสี่เหลี่ยมจัตุรัสที่สามเป็น 0 เราได้ตั้งค่าให้ย่อขนาด ดังนั้นความกว้างจะเท่ากับ 120px:

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

เฟล็กซ์

Flex แทนที่ flex-grow, flex-shrink และ flex-basis

ค่าต่อล็อค: 0 (เติบโต) 1 (หด) และอัตโนมัติ (พื้นฐาน)

มาสร้างสี่เหลี่ยมสองอัน:

Square#one ( ดิ้น: 2 1 300px; ) .square#two ( ดิ้น: 1 2 300px; )

สี่เหลี่ยมทั้งสองมีพื้นฐานดิ้น ซึ่งหมายความว่าจะมีความกว้าง 300px (ความกว้างคอนเทนเนอร์: 600px บวกระยะขอบและช่องว่างภายใน)

แต่ถ้าคอนเทนเนอร์มีการขยายขนาดมากขึ้น สี่เหลี่ยมจัตุรัสแรก (ที่มีส่วนโค้งงอที่ใหญ่ที่สุด) จะใหญ่กว่า และสี่เหลี่ยมจัตุรัสอื่น (ที่มีส่วนโค้งงอที่ใหญ่ที่สุด) จะใหญ่กว่า

เมื่อคำพูดเติบโตและบีบคั้น

หากช่องสี่เหลี่ยมแรกเปลี่ยน การชนะจะไม่ใหญ่เป็นสองเท่าของช่องสี่เหลี่ยมอื่น และหากช่องสี่เหลี่ยมอื่นเปลี่ยน การชนะจะไม่เล็กเป็นสองเท่าของช่องแรก ขึ้นอยู่กับสิ่งที่ใช้ flex-grow และ flex-shrink เพื่อเติบโตและเพิ่มความเร็ว

Trochs ของคณิตศาสตร์

ขนาดคอนเทนเนอร์ Cob: 640px เราสามารถเห็น 20px จากด้านสกินสำหรับช่องว่างภายใน และเราขาด 600px สำหรับสองช่องสี่เหลี่ยมเท่านั้น

หากความกว้างของคอนเทนเนอร์คือ 430px (210px ในบรรทัด) สี่เหลี่ยมจัตุรัสแรก (flex-shrink: 1) จะเป็น 70px อีกช่องหนึ่ง (flex-shrink: 2) กินพื้นที่ 140px

หากคอนเทนเนอร์เล็กลงเหลือ 340px เราใช้ 300px สี่เหลี่ยมจัตุรัสแรกใช้ 100px อีก 200px

เช่นเดียวกับ flex-grow

เกี่ยวกับผู้เขียน: ราเชล แอนดรูว์ - ไม่ใช่แค่หัวหน้าบรรณาธิการของนิตยสาร Smashing แต่ยังเป็นผู้ค้าปลีกเว็บ นักเขียนและนักพูดด้วย วอห์นยังเป็นนักเขียนหนังสือเตี้ยๆ ที่เป็นความลับอีกด้วย เค้าโครง CSS ใหม่ซึ่งเป็นหนึ่งในผู้ค้าปลีกของระบบการดูแลจัดการเนื้อหา Perch เขียนเกี่ยวกับธุรกิจและเทคโนโลยีบนเว็บไซต์ของคุณ rachelandrew.co.uk

zmist สั้น: ในสถิติเหล่านี้ เราจะเห็นพลังของมุมมอง Flexbox และกฎพื้นฐานเดียวกัน วิธีทำงานกับมุมมองตามแนวแกนหลักและแนวขวาง

ค่าจะทำงานในแนวตั้งเพื่อให้ทิศทางงอติดอยู่กับคอลัมน์ จริงอยู่ คุณอาจไม่มีพื้นที่ว่างสำหรับrozpodіluในไซต์ของคุณ ดังนั้นคุณจึงไม่สามารถเพิ่มความสูงหรือขนาดบล็อกของคอนเทนเนอร์ได้ เช่นเดียวกับการสาธิตนี้

การจัดตำแหน่งแกนเพื่อช่วยในการจัดตำแหน่งเนื้อหา

จากนั้นฉันสามารถเติมเนื้อหาที่จัดแนวด้วยค่าใดก็ได้

หากระบุทิศทางแบบยืดหยุ่นเป็นคอลัมน์ เนื้อหาจะถูกต้องตามที่ใช้

ชอบและตรงประเด็นของการจัดแนวเนื้อหา เราฝึกกับกลุ่มของแถวและขยายพื้นที่

อำนาจตามสถานที่-เนื้อหา

คอนเทนเนอร์ (วางเนื้อหา: ช่องว่างระหว่างยืด; )
Vidpovidaє tsoma:

คอนเทนเนอร์ ( align-content: space-between; justify-content: stretch; )
และรหัสนี้:

คอนเทนเนอร์ (เนื้อหาสถานที่: ช่องว่างระหว่าง; )
เท่ากับเชิงรุก:

คอนเทนเนอร์ ( align-content: space-between; justify-content: space-between; )

การจัดตำแหน่งแกนสำหรับความช่วยเหลือในการจัดตำแหน่งรายการ

คุณสามารถตั้งค่ากำลังของความสูงของคอนเทนเนอร์เป็นตัวเลือกได้:

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

ให้ความเคารพว่าแถวหนังมีแถวหนังสำหรับใส่บากาตาเรียเป็นภาชนะใหม่ องค์ประกอบที่ใหญ่ที่สุดในแถวนี้มีความสำคัญต่อการขยายองค์ประกอบทั้งหมดในแถวนี้

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

ค่าเฟล็กเอนด์จะย้ายไปยังส่วนท้ายของคอนเทนเนอร์ตามแกนตามขวาง

หากคุณเลือกค่าตรงกลาง องค์ประกอบจะถูกจัดกึ่งกลางทีละภาพ:

เรายังสามารถตรวจสอบข้อมูลพื้นฐานเหล่านี้ได้ Tse garantuy vyrivnyuvannya ข้อความจากหนึ่งsubstavі, vіdmіnuvіvіvnyuvannya vіvіvnyuvannya polіv navkole ข้อความ

คุณสามารถลองใช้ตัวเลือกเหล่านี้ทั้งหมดได้ในการสาธิต

การดูแลส่วนบุคคลเพื่อช่วยเหลือการจัดตำแหน่งตัวเอง

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

ทำไมไม่สามารถพิสูจน์ตัวเองได้?

คุณยังสามารถคิดอย่างรอบคอบว่าการจัดชิดเนื้อหาและการจัดแนวเนื้อหาทำงานอย่างไรกับ CSS Grid Layout ที่กริด พลังแห่งอำนาจจะได้รับจากพื้นที่ว่างrozpodіluในกริดคอนเทนเนอร์ ระหว่างรางกริด. ที่นี่เราใช้กลุ่มของเส้นทาง - และด้วยความช่วยเหลือของพลังเหล่านี้ เราขยายเส้นทางเหล่านี้เพื่อช่วยพวกเขา เนื่องจากเราสามารถดำเนินการในกลุ่ม i Grid, i Flexbox เราจึงไม่สามารถใช้องค์ประกอบเล็กๆ น้อยๆ และทำงานกับมันด้วยวิธีอื่นได้ ทิมไม่ได้เล็ก แต่วิธีดูแลการออกแบบเลย์เอาต์ อย่างที่นักออกแบบเลย์เอาต์ต้องการ ถ้าเราพูดถึงพลังของตัวเองในแกนหลัก Tse vikoristannya รดน้ำอัตโนมัติ

การเลือกสถานีรดน้ำอัตโนมัติบนแกนหลัก

ระยะขอบอัตโนมัติทำงานได้ดีขึ้นด้วย Flexbox เพื่อแสดงรายการหรือกลุ่มของรายการบนแกนหลักเพียงไม่กี่รายการ แสดงก้นก้าว vypadok ทั่วไป. Є แถบนำทาง องค์ประกอบปรากฏเป็นแถวและ double-cob justify-content: start ฉันต้องการให้ส่วนที่เหลือของย่อหน้าดูเหมือนส่วนที่เหลือของแถว ตัวอย่างเช่น เพื่อให้เข้าใจว่าแถวนั้นมีพื้นที่เพียงพอ

ใช้องค์ประกอบนี้และตรวจสอบว่าค่าระยะขอบซ้ายเป็นอัตโนมัติ Tse หมายความว่าฟิลด์ถูกขยายเพื่อเอามือซ้ายขององค์ประกอบออกให้มากที่สุดเท่าที่จะเป็นไปได้ ดังนั้นองค์ประกอบvishtovhuєtsyaไปทางขอบขวา

หากคุณเลือกฟิลด์อัตโนมัติบนแกนหลัก justify-content จะหยุดทำงาน ดังนั้นฟิลด์อัตโนมัติจะใช้พื้นที่ทั้งหมด ซึ่งมิฉะนั้นจะถูกขยายเพื่อความช่วยเหลือของ justify-content

สำรอง virivnyuvannya

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

ปลอดภัยที่ไม่ปลอดภัย virivnyuvannya

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

คอนเทนเนอร์ ( display: flex; flex-direction: column; width: 100px; align-items: unsafe center; ) .item:last-child ( width: 200px; )


virivnyuvannya zabіgaєvtraі danih อย่างปลอดภัย, remіshchuyuchi repovinnnya บนіnshiybіk

คอนเทนเนอร์ ( display: flex; flex-direction: column; width: 100px; align-items: safe center; ) .item:last-child ( width: 200px; )


ชี่ คีย์เวิร์ดในขณะที่เบราว์เซอร์ทั้งหมดไม่รองรับ แต่แสดงให้เห็นว่าข้อกำหนดการจัดตำแหน่งกล่องได้รับการควบคุมจาก Flexbox อย่างไร

วิสโนวอค

• จัดแนว - สำหรับแกนหลักและจัดแนว - สำหรับแนวขวาง
• align-content และ justify-content ต้องการพื้นที่มาก
• พลังของ align-content และ justify-content ที่จะสร้างขึ้นเพื่อองค์ประกอบของกลุ่ม ขยายช่องว่างระหว่างพวกเขา มันเป็นไปไม่ได้ที่จะแสดงองค์ประกอบvirіvnyuvannya okremenu ต่อพลังนั้น - vіdsutnyaในตัวเอง;
• หากคุณต้องการตรวจสอบองค์ประกอบหนึ่งหรือแบ่งกลุ่มตามแกน ให้เลือกฟิลด์อัตโนมัติ
• align-items กำหนดอำนาจ align-self สำหรับทั้งกลุ่ม แท็ก align-self บนองค์ประกอบลูกของกลุ่มเพื่อตั้งค่าทีละรายการ

เพื่อให้สั้นลง เลย์เอาต์จาก Flexbox มอบให้เรา วิธีแก้ปัญหาง่ายๆเมื่องานยาก ตัวอย่างเช่น หากคุณต้องการหมุนองค์ประกอบในแนวตั้ง หรือกดส่วนท้ายที่ด้านล่างของหน้าจอ หรือเพียงแค่ใส่ชิ้นส่วนของบล็อกในแถวเดียว เพื่อให้กลิ่นเหม็นไปทั่วทั้งพื้นที่ งานที่คล้ายกันจะถูกพับโดยไม่ต้องดิ้น เอล ฟังวิธีแก้ปัญหาคล้ายกับ "ทหารอาสา" มากขึ้น - เอาไปและเอาชนะ css เพื่อไม่ให้รับรู้ วิธีเดียวกันจาก flexbox ในลักษณะเดียวกับที่มันเปลี่ยนแปลงตัวเอง เมื่อคุณออกแบบ flex-model

CSS Flexible Box Layout Module (โมดูล CSS สำหรับเลย์เอาต์ที่มีบล็อกแบบยืดหยุ่น) ใน flexbox แบบสั้น ถูกสร้างขึ้นเพื่อล้างความไม่สมบูรณ์เมื่อสร้างการออกแบบ HTML ที่แตกต่างกัน รวมถึงการปรับให้เข้ากับความกว้างและความสูง และทำให้เลย์เอาต์มีตรรกะและเรียบง่าย และตามกฎแล้วจิตใจเชิงตรรกะนั้นได้รับการฝึกฝนในสถานที่ที่ไม่ถูกต้องซึ่งผลลัพธ์จะไม่บิดเบี้ยว - ตรรกะคือทุกสิ่งของเรา!

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

ความรู้พื้นฐาน

FlexBox ถูกซ้อนกันจากคอนเทนเนอร์และองค์ประกอบย่อย (รายการ) อย่างน้อยหนึ่งรายการ

ในการเปิดใช้งาน flexbox ไม่ว่าจะเป็นใครก็ตาม องค์ประกอบ HTMLเพียงพอที่จะแสดงพลังงาน css:flex; หรือแสดง: inline-flex; .

เมื่อเปิดเครื่อง flex power ตรงกลางของคอนเทนเนอร์จะสร้างสองแกน: ส่วนหัวเป็นแนวขวาง (ตั้งฉาก (⊥) กากบาท) หนวดขององค์ประกอบ (ของอันแรกเท่ากัน) กำลังแกว่งไปมาตามแกนหลัก หลังล็อคหัวอยู่ในแนวนอนและสามารถตั้งตรงได้ (→) และกากบาทอยู่ในแนวตั้งและตรงไปที่สัตว์ร้าย (↓)

มวลสามารถระลึกถึงหัวและแกนไขว้ได้จากนั้นองค์ประกอบจะถูกวางลงไปที่สัตว์ร้าย (↓) และหากหยุดถูกวางไว้ที่ความสูงพวกเขาจะยุบไปทางขวา (→) - จากนั้นแกนก็เรียบง่าย เป็นที่จดจำของมวลชน ในเวลาเดียวกัน cob และจุดสิ้นสุดของ rozashuvannya ขององค์ประกอบจะไม่เปลี่ยนแปลง - พวกมันเปลี่ยนโดยตรงเท่านั้น (osi)! นอกจากนี้ยังจำเป็นต้องแสดงเพลาที่อยู่ตรงกลางของภาชนะ คุณไม่จำเป็นต้องคิดเกี่ยวกับแกน "ทางกายภาพ" ที่มีอยู่และมีกลิ่นเหม็นอยู่ในนั้น แกนที่นี่เป็นเพียงองค์ประกอบที่อยู่ข้างหน้าเพียงไม่กี่ชิ้นที่อยู่ตรงกลางของภาชนะ ตัวอย่างเช่น หากเราสั่งการจัดตำแหน่งขององค์ประกอบที่กึ่งกลางของแกนหลัก จากนั้นจึงเปลี่ยนจุดศูนย์กลางของแกนหลักโดยตรง จากนั้นจึงเปลี่ยนและจัดตำแหน่ง: องค์ประกอบอยู่ตรงกลางในแนวนอน และเหล็กอยู่ตรงกลางในแนวตั้ง .. . ดิวิชั่น. ก้น

คุณสมบัติที่สำคัญอีกประการของ Flex-box คือการมีแถวที่เส้นตรงตามขวาง เพื่อให้เข้าใจว่าภาษาคืออะไร สังเกตว่าส่วนหัวเป็นแนวนอน มีองค์ประกอบมากมาย และกลิ่นเหม็นไม่ "รั่ว" ที่คอนเทนเนอร์ ดังนั้นไปยังแถวถัดไป ทูบโต คอนเทนเนอร์มีลักษณะดังนี้: คอนเทนเนอร์มีสองแถวตรงกลาง แถวสกินมี sprat ขององค์ประกอบ คุณสังเกตเห็นหรือไม่? และตอนนี้จำไว้ว่าเราสามารถเปลี่ยนทิศทางในแนวตั้งได้ไม่น้อยกว่าองค์ประกอบหนึ่ง แต่โอ้ ลาวี! cepracyuєดีเพียงใดสามารถมองเห็นได้จากก้นสู่พลัง และแกนมีลักษณะดังนี้:

พลัง CSSซึ่งสามารถฉีดเข้าไปในโมเดลเลย์เอาต์ได้: float, clear, vertical-align, คอลัมน์ไม่ทำงานกับโครงสร้างแบบยืดหยุ่น ที่นี่รูปแบบอื่นของเลย์เอาต์ได้รับชัยชนะ และพลัง css จะถูกเพิกเฉย

CSS Power Flexbox

Flexbox ล้างแค้นกฎ css ที่แตกต่างกันสำหรับการรวมโครงสร้างแบบยืดหยุ่นทั้งหมด บางส่วนจำเป็นต้องโหลดไปยังคอนเทนเนอร์หลัก บางส่วนต้องโหลดไปยังคอนเทนเนอร์องค์ประกอบ

สำหรับคอนเทนเนอร์

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

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

flex และ inline-flex ต่างกัน ซึ่งโต้ตอบกับองค์ประกอบอื่นๆ ต่างกัน เช่น display:block และ display:inline-block

เปลี่ยนแกนหลักของคอนเทนเนอร์โดยตรง ขวางทุกอย่างเปลี่ยนแปลงในลักษณะเดียวกัน

• แถว (ค่าเริ่มต้น)- องค์ประกอบตรงไปข้างหน้าไปทางขวา (→)
• คอลัมน์- ตรงลงองค์ประกอบไปยังสัตว์ร้าย (↓)
• แถวย้อนกลับ- โดยตรง element_v ขวา nal_vo (←)
• คอลัมน์ย้อนกลับ- องค์ประกอบโดยตรงจากล่างขึ้นบน ()

อนุญาตให้โอนองค์ประกอบที่ไม่ได้วางไว้ในคอนเทนเนอร์

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

ดูถูกพลังของ flex-direction และ flex-wrap มากขึ้น กลิ่นเหม็นมักถูกแฮ็กในครั้งเดียว ดังนั้นการเขียนโค้ดให้น้อยลงจึงเกิดจากพลังของ flex-flow

flex-flow ยอมรับความหมายของพลังทั้งสองแยกจากกันด้วยช่องว่าง อย่างอื่นพูดได้ความหมายเดียวคือคุณภาพ

/* ทิศทางดิ้นเท่านั้น */ flex-flow: แถว; flex-flow: แถวย้อนกลับ; การไหลแบบยืดหยุ่น: คอลัมน์; flex-flow: คอลัมน์ย้อนกลับ; /* flex-wrap เท่านั้น */ flex-flow: nowrap; การไหลแบบยืดหยุ่น: ห่อ; การไหลแบบยืดหยุ่น: ห่อย้อนกลับ; /* ผิดเพียงค่า: flex-direction และ flex-wrap */ flex-flow: row nowrap; การไหลแบบยืดหยุ่น: ห่อคอลัมน์; flex-flow: ห่อกลับคอลัมน์ย้อนกลับ; ปรับเนื้อหา:

ดูองค์ประกอบจากแกนหลัก: ถ้าทิศทาง=แถว จากแนวนอน และถ้าทิศทาง=คอลัมน์ จากแนวตั้ง

• การเริ่มต้นแบบยืดหยุ่น (ค่าเริ่มต้น)- องค์ประกอบจะไปที่ซัง (ในประเทศคุณอาจไม่มีที่ว่าง)
• ปลายงอ- องค์ประกอบสั่นสะเทือนจนสุด (มีพื้นที่เพียงพอบนซัง)
• ศูนย์- ตรงกลาง
• ช่องว่างระหว่าง- องค์ประกอบสุดขีดถูกบีบไปที่ขอบ (ช่องว่างระหว่างองค์ประกอบถูกแบ่งเท่า ๆ กัน)
• พื้นที่รอบ ๆ- พื้นที่ว่างถูกกระจายอย่างสม่ำเสมอระหว่างองค์ประกอบ (องค์ประกอบที่รุนแรงไม่ยึดติดกับขอบ) ช่องว่างระหว่างขอบของคอนเทนเนอร์กับองค์ประกอบด้านนอกสุดจะเล็กลง ช่องว่างที่ต่ำกว่าระหว่างองค์ประกอบที่อยู่ตรงกลางของแถว
• พื้นที่สม่ำเสมอ

แถวVirivnyuєซึ่งมีองค์ประกอบของแกนตามขวาง เนื้อหาให้เหตุผลเดียวกันสำหรับแกนตรงข้ามเท่านั้น

หมายเหตุ: Pratsyuєหากน้อยกว่า 2 แถว จะไม่มีอะไรเกิดขึ้นหากมีมากกว่า 1 แถว

ทูบโต ถ้า flex-direction: row พลังของแถวแนวตั้งจะมองไม่เห็น ที่นี่เป็นสิ่งสำคัญที่จะต้องทราบว่าความสูงของบล็อกนั้นเกิดจาก buti ถูกตั้งค่า zhorstko และอาจมีความสูงของแถวมากกว่าไม่เช่นนั้นแถวจะขยายคอนเทนเนอร์และเป็นเหมือนїхнє virіvnyuvannyaความรู้สึกสิ้นเปลืองที่ไม่มี ช่องว่างระหว่างพวกเขา... และแกนถ้า flex-direction: คอลัมน์ flex-direction แล้วแถวจะยุบในแนวนอน → และความกว้างของคอนเทนเนอร์อาจมากกว่าความกว้างของแถวและแถวจะบวมเป็นความรู้สึก .

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

องค์ประกอบVivnyuєของแกนตามขวางตรงกลางแถว (แถวที่มองไม่เห็น) ทูบโต ตัวแถวเองถูกจัดแนวผ่าน align-content และองค์ประกอบที่อยู่ตรงกลางของแถว (แถว) เหล่านี้ผ่าน align-items และตลอดแนวแกนตามขวาง บนแกนหลัก ไม่มีสิ่งนั้น ไม่มีทางที่จะเข้าใจแถวขององค์ประกอบเหล่านั้นผ่านการปรับเนื้อหา

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

สำหรับองค์ประกอบคอนเทนเนอร์

ตั้งค่าสัมประสิทธิ์การเพิ่มขึ้นขององค์ประกอบสำหรับการมีอยู่ของพื้นที่ว่างสำหรับคอนเทนเนอร์ โปรโมชั่น flex-grow: 0 tobto. องค์ประกอบของชีวิตไม่ต้องตำหนิสำหรับการเพิ่มปริมาณพื้นที่ในภาชนะ

โดยทั่วไปแล้ว flex-grow: 0

• หากคุณระบุ flex-grow:1 สำหรับองค์ประกอบทั้งหมด กลิ่นเหม็นทั้งหมดจะขยายตัวในลักษณะเดียวกันและใส่ทุกอย่างลงในคอนเทนเนอร์
• หากคุณระบุ flex-grow:1 สำหรับองค์ประกอบใดองค์ประกอบหนึ่ง คุณจะไม่สามารถจัดเก็บทุกอย่างในคอนเทนเนอร์ได้อีกต่อไป และ justify-content จะไม่ทำงาน: ไม่มีอะไรที่จะเติบโต
• ด้วย flex-grow:1. หากหนึ่งในนั้นสามารถงอได้: 2 ไวน์ก็จะเพิ่มอีกสองอันและอีกอันหนึ่งจะลดลง
• หากบล็อก flex ทั้งหมดที่อยู่ตรงกลางของคอนเทนเนอร์ flex สามารถมี flex-grow:3 ได้ก็จะมีขนาดเท่ากัน
• ด้วย flex-grow:3. หากหนึ่งในนั้นสามารถ flex-grow:12 ได้ก็จะใหญ่กว่าสี่เท่าและต่ำกว่า

คุณทำงานอย่างไร? สมมติว่าคอนเทนเนอร์สามารถมีความกว้าง 500px และประกอบด้วยสององค์ประกอบที่สามารถมีความกว้างฐาน 100px คอนเทนเนอร์จึงมีพิกเซลว่าง 300 พิกเซล สำหรับองค์ประกอบแรกเราสามารถพูดได้ว่า flex-grow:2; , และอีกแบบหนึ่ง flex-grow: 1; บล็อกจะใช้ความกว้างเต็มของคอนเทนเนอร์ ดังนั้นความกว้างของบล็อกแรกจะเป็น 300px และความกว้างของอีก 200px มีการอธิบายว่าพื้นที่ว่าง 300px ที่พร้อมใช้งานในคอนเทนเนอร์นั้นถูกแบ่งระหว่างองค์ประกอบในอัตราส่วน 2:1, +200px ต่ออันแรก และ +100px ไปยังอีกองค์ประกอบหนึ่ง

หมายเหตุ: สามารถระบุค่าได้ เศษส่วนตัวอย่างเช่น 0.5 - flex-grow:0.5

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

โดยทั่วไปดิ้นหดตัว:1

สมมติว่าคอนเทนเนอร์สามารถมีความกว้าง 600px และประกอบด้วยสององค์ประกอบที่สามารถกว้างได้ 300px - flex-basis:300px; . ทูบโต สององค์ประกอบจะเติมคอนเทนเนอร์ องค์ประกอบแรกควรมีการหดตัวแบบยืดหยุ่น: 2; และเฟล็กซ์หดอื่น: 1; . ตอนนี้เปลี่ยนความกว้างของคอนเทนเนอร์เป็น 300px ดังนั้น องค์ประกอบจะย่อขนาด 300px เพื่อให้อยู่ตรงกลางของคอนเทนเนอร์ บีบที่spіvvіdshennі 2:1, tobto บล็อกแรกจะย่อขนาด 200px และอีกบล็อก 100px และองค์ประกอบใหม่จะกลายเป็น 100px และ 200px

หมายเหตุ: ค่าสามารถมีเศษส่วนได้ เช่น 0.5 - flex-shrink:0.5

ตั้งค่าความกว้างฐานขององค์ประกอบเป็นความกว้างที่อยู่ด้านหน้า ดังนั้นคุณจึงควรระมัดระวังในการเพิ่มความกว้างขององค์ประกอบ สามารถตั้งค่าเป็น px, em, rem, %, vw, vh เป็นต้น ความกว้างของกล่องถูกกำหนดเป็นความกว้างฐานและค่าของ flex-grow, flex-shrink และเนื้อหาที่อยู่ตรงกลางของบล็อก ด้วย auto องค์ประกอบจะถูกตั้งค่าเป็นความกว้างฐานที่ตรงกับเนื้อหาที่อยู่ตรงกลาง

โดยทั่วไป: อัตโนมัติ

ในกรณีอื่น จะง่ายกว่าในการตั้งค่าความกว้างขององค์ประกอบโดยผ่านความกว้างขององค์ประกอบพลังงาน ตัวอย่างเช่น ความกว้าง: 50%; หากสิ่งนี้หมายความว่าองค์ประกอบที่อยู่ตรงกลางของคอนเทนเนอร์จะเท่ากับ 50% จากนั้นโปรตีจะใช้พลังของ flex-grow และ flex-shrink นี่อาจจำเป็นหากองค์ประกอบถูกยืดออกตรงกลางองค์ประกอบที่ใหญ่กว่าองค์ประกอบที่กำหนดไว้ในเกณฑ์ยืดหยุ่น ก้น

flex-basis จะ "ยาก" ในการรีเซ็ตการยืดและลายนูน: flex-basis: 200px; ดิ้นเติบโต:0; ดิ้นหด:0; . ทุกอย่างสามารถเขียนได้แบบนี้ flex:0 0 200px; .

ชวเลขสำหรับสามยกกำลัง: flex-grow flex-shrink flex-basis

ทั่วไป: ดิ้น: 0 1 อัตโนมัติ

อย่างไรก็ตาม คุณสามารถป้อนค่าได้หนึ่งหรือสองค่า:

ดิ้น: ไม่มี; /* 0 0 อัตโนมัติ */ /* หมายเลข */ ดิ้น: 2; /* flex-grow (flex-basis เติบโตที่ 0) */ /* ไม่ใช่ตัวเลข */ flex: 10em; /* พื้นฐานดิ้น: 10em */ ดิ้น: 30px; /* flex-basis: 30px */ flex: อัตโนมัติ; /* flex-basis: auto */ flex: เนื้อหา; /* พื้นฐานดิ้น: เนื้อหา */ ดิ้น: 1 30px; /* flex-grow และ flex-basis */ flex: 2 2; /* flex-grow และ flex-shrink (flex-basis jump ที่ 0) */ flex: 2 2 10%; /* flex-grow และ flex-shrink และ flex-basis */ align-self:

อนุญาตให้คุณเปลี่ยนพลังของการจัดตำแหน่งสำหรับรายการที่อยู่ในกรอบเท่านั้น

โดยทั่วไป: เป็นคอนเทนเนอร์การจัดรายการ

• ยืด- องค์ประกอบถูกยืดออกในแถวในแถว
• เริ่มดิ้น- องค์ประกอบถูกบีบไปที่ซังของแถว
• ปลายงอ- องค์ประกอบถูกกดไปที่จุดสิ้นสุดของแถว
• ศูนย์- องค์ประกอบอยู่ในตำแหน่งกึ่งกลางของแถว

พื้นฐาน- องค์ประกอบอยู่ด้านหลังบรรทัดฐานของข้อความ

ให้คุณเปลี่ยนลำดับ (ตำแหน่ง, ค่าย) ขององค์ประกอบในแถวลูกโซ่

โดยทั่วไป: คำสั่ง: 0

ด้านหลังคำอธิบายภาพ องค์ประกอบสามารถเรียงลำดับได้: 0 และจัดวางในลำดับที่ปรากฏในโค้ด HTML เป็นเส้นตรง นอกจากนี้ หากคุณเปลี่ยนค่าพลังของคำสั่ง องค์ประกอบจะถูกจัดเรียงตามลำดับของค่า: -1 0 1 2 3 ... . ตัวอย่างเช่น หากคุณระบุลำดับ: 1 สำหรับองค์ประกอบหนึ่ง ดังนั้นศูนย์ทั้งหมดจะไปก่อน จากนั้นองค์ประกอบที่มี 1

ดังนั้นจึงเป็นไปได้ ตัวอย่างเช่น ที่จะโยนองค์ประกอบแรกเป็น kinets โดยไม่ได้เปลี่ยนการเคลื่อนที่ขององค์ประกอบอื่นหรือโค้ด HTML โดยตรง

บันทึกย่อ

flex-basis กับ width ต่างกันอย่างไร?

ด้านล่างนี้คือรายละเอียดที่สำคัญระหว่าง flex-basis และ width/height:

flex-basis ใช้งานได้จริงสำหรับแกนหลัก ซึ่งหมายความว่าเมื่อ flex-direction:row flex-basis ควบคุมความกว้าง (ความกว้าง) และเมื่อ flex-direction:column ควบคุมความสูง .

flex-basis ทำให้อิลิเมนต์ดิ้นน้อยลง ซึ่งหมายความว่าการเปิด flex ในคอนเทนเนอร์จะไม่มีผลใดๆ

องค์ประกอบคอนเทนเนอร์แบบสัมบูรณ์ไม่มีส่วนร่วมในโครงสร้างแบบยืดหยุ่น... นอกจากนี้ พื้นฐานการทำงานแบบยืดหยุ่นจะไม่ทับซ้อนกับองค์ประกอบคอนเทนเนอร์แบบยืดหยุ่นเนื่องจากตำแหน่งที่แน่นอน: มีกลิ่นเหม็นสัมบูรณ์ คุณจะต้องระบุความกว้าง/ความสูง

• ด้วยค่าตัวแปร flex 3 ​​(flex-grow / flex-shrink / flex-basis) สามารถรวมกันและเขียนให้สั้นได้ และสำหรับความกว้าง ขยายหรือย่อ จำเป็นต้องเขียน okremo ตัวอย่างเช่น: flex:0 0 50% == width:50%; ดิ้นหด:0; . บางครั้งก็ไม่สะดวก

ถ้าเป็นไปได้ ยังคงให้ความสำคัญกับ flex-basis เปลี่ยนความกว้างก็ต่อเมื่อฐานดิ้นไม่พอดี

Vidminnist flex-basis vіd width – คุณสมบัติ bug chi?

เนื้อหาที่อยู่ตรงกลางขององค์ประกอบ flex สามารถขยายได้และไม่สามารถเกินขอบเขตได้ อย่างไรก็ตาม หากคุณตั้งค่าความกว้างโดยใช้ width หรือ max-width แทน flex-basis องค์ประกอบที่อยู่ตรงกลางของคอนเทนเนอร์ flex จะซูมออกจากตรงกลางของคอนเทนเนอร์ (อย่างไรก็ตาม พฤติกรรมนี้จำเป็น) ก้น:

สมัคร Flex Nesting

ก้นไม่มีคำนำหน้าสำหรับความเข้ากันได้ข้ามเบราว์เซอร์ได้ทุกที่ ฉันได้ทำไปแล้วสำหรับการอ่าน css ด้วยตนเอง สมัครประหลาดใจที่เหลือ เวอร์ชันของ Chromeหรือไฟร์ฟอกซ์

#1 ก้นเรียบง่ายด้วยการจัดแนวแนวตั้งและแนวนอน

เริ่มจากก้นที่ง่ายที่สุด - การจัดแนวแนวตั้งและแนวนอนพร้อมกันและสำหรับความสูงของบล็อก navit humovoy

มิฉะนั้นจะไม่มีบล็อกตรงกลาง:

#1.2 Podil (เปิด) ระหว่างองค์ประกอบของบล็อกแบบยืดหยุ่น

ในการขยายองค์ประกอบคอนเทนเนอร์รอบขอบและเลือกองค์ประกอบให้เพียงพอ หลังจากที่คุณขยาย คุณต้องเปลี่ยนพลังของ margin-left:auto หรือ margin-right:auto

#2 เมนูตอบสนองบน flex

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

#3 ตอบสนอง 3 คอลัมน์

ก้นนี้แสดงเหมือนวางไข่ 3 คอลัมน์อย่างรวดเร็วและด้วยตนเอง ดังนั้นเมื่อส่งเสียง มันจะเปลี่ยนเป็น 2 แล้วจึงเปลี่ยนเป็น 1

รับความเคารพ สิ่งที่คุณทำได้โดยไม่มีกฎเกณฑ์ของสื่อที่ได้รับชัยชนะ ทุกอย่างอยู่ในรูปแบบยืดหยุ่น

ไปที่ jsfiddle.net และเปลี่ยนความกว้างของส่วน "ผลลัพธ์"

#4 บล็อกที่ตอบสนองต่อ flex

อนุญาตให้เราป้อน 3 ช่วงตึก หนึ่งขนาดใหญ่และสองขนาดเล็ก เมื่อใดก็ตามที่จำเป็น บล็อกจะถูกวางไว้ใต้หน้าจอขนาดเล็ก โรบิโม:

ไปที่ jsfiddle.net และเปลี่ยนความกว้างของส่วน "ผลลัพธ์"

#5 แกลลอรี่เกี่ยวกับดิ้นและการเปลี่ยนแปลง

ก้นนี้แสดงให้เห็นว่าคุณสามารถสร้างหีบเพลงได้ดีเพียงใดด้วยรูปภาพที่ยืดหยุ่น ให้ความเคารพต่อการเปลี่ยนแปลงกำลังสำหรับ flex

#6 Flex y flex (แค่ก้น)

Zavdannya zrobiti gnuchki บล็อก ดังนั้นข้อความ cob ใน skin blot จึงอยู่บนบรรทัดเดียวในแนวนอน ทูบโต ด้วยความกว้างของเสียง บล็อกจะเติบโตที่ความสูง จำเป็นต้องรูปภาพอยู่ด้านบน ปุ่มอยู่ด้านล่าง และข้อความที่อยู่ตรงกลางจะเริ่มต้นตามเส้นแนวนอนหนึ่งเส้น

เพื่อให้งานนี้สำเร็จ ตัวบล็อกเองจะถูกยืดออกด้วย flex และกำหนดความกว้างสูงสุดที่เป็นไปได้ โคเจิ้น หน่วยในร่มด้วยการออกแบบที่ยืดหยุ่นด้วยการหมุนทิศทางการโค้งของน้ำหนัก: คอลัมน์; และองค์ประกอบตรงกลาง (ที่จะพบข้อความ) ขยาย flex-grow:1; เพื่อเติมพื้นที่ว่างทั้งหมดเพื่อให้ได้ผลลัพธ์ - ข้อความเริ่มต้นจากบรรทัดเดียว

สมัครเพิ่ม

รองรับเบราว์เซอร์ - 98.3%

อีกครั้งไม่มีจิตใจที่ดี แต่ทุกอย่าง เบราว์เซอร์ที่ทันสมัยตัดแต่งโครงสร้าง flexbox สำหรับอย่างอื่นจำเป็นต้องระบุคำนำหน้า สำหรับภาพจริง มาดูที่ caniuse.com และ bachimo กัน ในวันนี้ไม่มีคำนำหน้า 96.3% ของเบราว์เซอร์จะทำงาน โดยมีคำนำหน้า 98.3% นี่คือการแสดงวิธีอวด flexbox อย่างกล้าหาญ

เพื่อให้รู้ว่าคำนำหน้าใดที่เกี่ยวข้องกับวันนี้ (cherv. 2019) ฉันจะชี้ให้เห็นกฎการทำงานแบบยืดหยุ่นที่ดีที่สุดสำหรับ ต้องการคำนำหน้า:

/* คอนเทนเนอร์ */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -flex -flow:ตัดคอลัมน์; flex-flow:ตัดคอลัมน์; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; distribution; align-content:space-around; ) /* รายการ */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex-negative:2; flex-shrink:2; - ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; :center;align-self:center;-webkit-box-ordinal-group:3; -ms-flex- สั่งซื้อ:2;สั่งซื้อ:2;

อีกไม่นาน เนื่องจากผู้มีอำนาจที่มีคำนำหน้าจะถูกส่งไปยังผู้มีอำนาจเดิม
รายการนี้ไม่มีคำนำหน้าที่ไม่จำเป็นสำหรับวันนี้ (จาก caniuse) แต่มีคำนำหน้ามากกว่านี้

• (ใหม่) - ไวยากรณ์ใหม่: display: flex; .
• (tweener) - ไวยากรณ์เก่าที่ไม่เป็นทางการในปี 2011: display: flexbox; .
• (เก่า) - ไวยากรณ์ร็อคเก่าปี 2009: display: box;

วีดีโอ

อย่าลืมวิดีโอนี้เป็นเวลาหนึ่งชั่วโมงที่คุณเข้าใจได้ชัดเจน แกนคู่ยอดนิยม:

ข้อความโดยFlex

flexboxfroggy.com - หน้าแรกของ flexbox

Flexplorer เป็นตัวสร้างโค้ดเฟล็กซ์พื้นฐาน

และส่งคำขอดึงมาให้เรา

อย่างที่สุด ผู้เขียนมีหน้าที่ตั้งค่า flex เป็นค่าใดค่าหนึ่งต่อไปนี้: auto , initial , none , หรือ positive unitless number บวก เพื่อให้ได้ค่าเหล่านี้ คุณต้องปรับคอนเทนเนอร์แบบยืดหยุ่นด้านล่าง:

ไม่ว่าจะด้วยวิธีใด รายการแบบยืดหยุ่นจะไม่ย่อขนาดต่ำกว่าขนาดเนื้อหาขั้นต่ำ

ไวยากรณ์

คุณสมบัติ flex สามารถระบุได้โดยใช้ค่าหนึ่ง 2 หรือ 3 ค่า

ค่า

ไวยากรณ์ที่เป็นทางการ

ตัวอย่าง

var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("คลิก", ​​function() ( raw.style.display = raw.style.display == "none" ? "block" : "none"; )); #flex-container ( width: 100%; font-family: Consolas, Arial, sans-serif; ) #flex-container > div ( border: 1px solid #f00; padding: 1rem; ) #flex-container > .raw- รายการ ( เส้นขอบ: 1px ทึบ #000; )

ผลลัพธ์

ข้อมูลจำเพาะ

ความเข้ากันได้ของเบราว์เซอร์

ความกะทัดรัดของตารางด้านนี้เกิดจากการจัดโครงสร้างข้อมูล หากคุณต้องการทราบข้อมูลเกี่ยวกับข้อมูลของคุณ ให้คลิกที่ https://github.com/mdn/browser-compat-data แล้วส่งคำขอดึงข้อมูลถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub