5 ข้อผิดพลาดที่ต้องหลีกเลี่ยงเมื่อเปลี่ยนมาใช้ระบบเค้าโครง FlexBox ของ Divi 5

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

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

โพสต์นี้จะเข้าสู่ข้อผิดพลาดที่ยิ่งใหญ่ที่สุดห้าข้อที่คุณจะได้รับเมื่อเปลี่ยนรูปแบบจิตของคุณจากบล็อกเป็น Flex ใน Divi 5

Pitfall #1: บังคับให้งอเข้าไปในความคิดบล็อก

→ Flex ต้องใช้รูปแบบจิตใหม่ไม่ใช่แค่การควบคุมใหม่

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

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

Divi 5 ทำงานแตกต่างกันไปในขณะนี้เนื่องจากคอนเทนเนอร์ใหม่ (เช่นส่วนแถวคอลัมน์และกลุ่ม) ถูกตั้งค่าเป็น "Flex" โดยค่าเริ่มต้น คุณจะได้รับตัวเลือกที่เฉพาะเจาะจงมากขึ้นในระดับคอนเทนเนอร์สำหรับการจัดเรียงองค์ประกอบเด็ก FlexBox นั้นทรงพลังเพราะช่วยให้เลย์เอาต์ที่ยืดหยุ่นซึ่งองค์ประกอบอยู่ในตำแหน่งตามพื้นที่ว่างและเนื้อหาภายใน เพิ่มเติมเกี่ยวกับสิ่งนั้นในข้อผิดพลาดครั้งต่อไป สิ่งนี้ช่วยให้เลย์เอาต์ปรับให้เข้ากับขนาดหน้าจอและเนื้อหาที่แตกต่างกันโดยไม่ต้องพึ่งพาตำแหน่งคงที่หรือแน่นอน นี่คือตัวอย่างหนึ่งในการเปรียบเทียบ Flex กับ Block

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

การตั้งค่าและตัวเลือกแต่ละตัวใน UI นั้นสอดคล้องกับคุณสมบัติ CSS จริงที่เพิ่มเข้ามาในแต่ละคอนเทนเนอร์โดยตรง

Pitfall #2: ไม่รู้ว่า Flex Shrink และเติบโตเข้ากับการปรับขนาดองค์ประกอบของเด็กอย่างไร

→หากไม่มีการหดตัวและเติบโตเลย์เอาต์ของคุณจะไม่ทำงานตามที่คาดไว้

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

Divi เปิดเผยการควบคุมเช่น“ Grow to Fill”,“ หดตัวให้พอดี” และการตั้งค่าที่กำหนดเองในองค์ประกอบของเด็กภายในคอนเทนเนอร์ Flex (องค์ประกอบเด็ก> การออกแบบ> การปรับขนาด> เติบโตขึ้นเพื่อเติมเต็มหดตัวลงหรือกำหนดเอง )

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

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

ลองดูตัวอย่างอื่นที่สร้างขึ้นด้วย FlexBox

คอนเทนเนอร์คอลัมน์ (Parent) ถูกตั้งค่าเป็น Flex ด้วยการตั้งค่าเหล่านี้:

• ช่องว่างแนวนอนและแนวตั้ง : 30px (ซึ่งอาจใช้ Calc หรือแคลมป์ให้ดีขึ้นเล็กน้อยแม้)
• ทิศทางเค้าโครง : แถวย้อนกลับ (คำอธิบายสำหรับการตัดสินใจครั้งนี้ในหลุมพราง #4)
• ปรับเนื้อหา : ศูนย์
• จัดเรียงรายการ : ศูนย์
• Flex Wrap : Wrap Reverse (คำอธิบายสำหรับการตัดสินใจครั้งนี้ใน Pitfall #4)

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

• โมดูลหัวเรื่อง
  • ขนาดข้อความ : แคลมป์ (2REM, 1.5REM + 2VW, 3REM)
  • ความกว้าง : อัตโนมัติ
  • Size Flex : หดเพื่อให้พอดี
• โมดูลตัวแบ่ง
  • ความกว้าง : อัตโนมัติ
  • Size Flex : หดเพื่อให้พอดีและเติบโตเพื่อเติมเต็ม
• โมดูลข้อความ
  • ขนาดข้อความ : แคลมป์ (0.9375REM, 0.75REM + 0.4VW, 1REM)
  • ความกว้าง : อัตโนมัติ
  • Size Flex : หดเพื่อให้พอดี

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

Pitfall #3: ไม่ทำลายนิสัย

→ใช้ช่องว่างแทน - มันฉลาดกว่าทำความสะอาดและทำเพื่อความยืดหยุ่น

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

ระบบ FlexBox ของ Divi 5 แนะนำการควบคุมช่องว่างในแนวตั้งและแนวตั้งภายใต้การออกแบบ> เลย์เอาต์ > ช่องว่างแนวนอนและแนวตั้ง แผนที่เหล่านี้ไปยัง CSS Gap และ Row-Gap ช่องว่างแนวตั้งจะใช้งานโดยอัตโนมัติกับแต่ละ“ แถวเฟล็กซ์” เมื่อรายการห่อลงบนบรรทัดใหม่ เช่นเดียวกับช่องว่างแนวนอน: เมื่อใดก็ตามที่มีองค์ประกอบของเด็กอยู่ข้างๆกันช่องว่างจะปรากฏขึ้น การตั้งค่าช่องว่างเหล่านี้ยังยอมรับหน่วย CSS ที่เป็นบวกใด ๆ ดังนั้นคุณสามารถใช้แคลมป์ () หรือ calc () เพื่อสร้างช่องว่างช่องว่างที่ตอบสนองได้

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

Pitfall #4: การควบคุมการไหลย้อนกลับและการสั่งซื้อที่ต่ำกว่าการควบคุมการสั่งซื้อ

→คำสั่งซื้อภาพและคำสั่งความหมายไม่ต้องตรงกัน

โดยค่าเริ่มต้นองค์ประกอบของเด็กในคอนเทนเนอร์ Flex จะแสดงตามลำดับต้นทาง FlexBox และ Divi 5 ให้ความสามารถในการระบุทิศทางการยืดหยุ่นแบบย้อนกลับและการควบคุมคำสั่งซื้อเพื่อเปลี่ยนการไหลขององค์ประกอบภาพโดยไม่ต้องเปลี่ยนการสั่งซื้อ HTML ขององค์ประกอบ

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

การใช้ Row Reverse เป็นทิศทาง Flex และ Wrap Reverse ยังคงรักษาคำสั่ง HTML (สำคัญสำหรับการเข้าถึง) ในขณะเดียวกันก็ช่วยให้ฉันสามารถออกแบบสิ่งที่เราจินตนาการได้

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

Pitfall #5: ลืมที่จะวางห่อ

→ Flex จะไม่หยุดแถวใหม่เว้นแต่คุณจะบอก

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

Divi รวมถึงสลับที่เรียกว่า การห่อเลย์เอาต์ซึ่งมี สามรัฐ: ไม่มีการห่อ, ห่อและการย้อนกลับ คุณต้องเปิดใช้งาน WRAP หากคุณต้องการให้โมดูลแตกเป็นบรรทัดใหม่ที่เกณฑ์ นั่นเป็นวิธีที่ Divi รองรับโครงสร้างหลายแถวภายในภาชนะเดียว (ซ้อนกันหรือหลายแถวไม่ใช่วิธีเดียวที่จะทำตอนนี้)

ใช้เวลาในการฝึกฝน FlexBox

Flex in Divi 5 นั้นมีประสิทธิภาพมากกว่าระบบเค้าโครงบล็อกก่อนหน้าของ Divi ก่อนหน้านี้ อย่างไรก็ตามมันต้องใช้การเรียนรู้ที่จะเข้าใจ FlexBox ไม่ใช่การตั้งค่าเฉพาะบุคคลดังนั้นจึงเป็นสิ่งสำคัญที่คุณต้องรู้พื้นฐานของการทำงานของเครื่องมือ CSS นี้ Divi ทำให้ง่ายต่อการใช้งานเนื่องจากการตั้งค่าทั้งหมดที่คุณสามารถใช้ใน CSS มีอยู่ในตัวแก้ไขโดยตรง แต่แนวคิดนั้นแตกต่างจากบล็อกมาก

เนื่องจากความแตกต่างเหล่านั้นเราขอแนะนำให้คุณใช้เวลาหนึ่งชั่วโมงโดยใช้เครื่องมือการสอนแบบโต้ตอบเพื่อทำความเข้าใจกับ FlexBox หนึ่งที่ใช้งานง่ายและเคล็ดลับคือ FlexBoxFroggy.com มันจะพาคุณผ่าน 24 ความท้าทายที่ซับซ้อนอย่างต่อเนื่องสอนพื้นฐานทั้งหมดให้คุณ มันเป็นวิธีที่ดีกว่า doomscrolling เป็นเวลาหนึ่งชั่วโมง

ใช้ Flex กับ Divi 5 วันนี้

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