ทำความเข้าใจทุกการตั้งค่า FlexBox ใน Divi 5

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

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

มาดำน้ำกันเถอะ

FlexBox คืออะไร?

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

สมัครสมาชิกช่อง YouTube ของเรา

แนวคิดหลักของ FlexBox

FlexBox ดำเนินการเกี่ยวกับแนวคิดพื้นฐานหลายประการ:

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

Flexbox ใน Divi 5: ยุคใหม่

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

การเข้าถึง FlexBox ใน Divi 5

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

การตั้งค่าเหล่านี้ถูกนำไปใช้ที่ระดับคอนเทนเนอร์ Flex (ส่วนแถว ฯลฯ ) ควบคุมพฤติกรรมของรายการ Flex อินเทอร์เฟซของ Divi แสดงการตั้งค่าผ่านตัวเลือกที่ใช้งานง่ายทำให้ FlexBox ง่ายสำหรับผู้ใช้ทุกระดับทักษะ

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

รายละเอียดรายละเอียดของการตั้งค่า FlexBox ใน Divi 5

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

สไตล์เค้าโครง

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

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

ช่องว่างแนวนอนและแนวตั้ง

ในการตั้งค่า FlexBox ของ Divi 5 การควบคุมช่องว่างแนวนอนและแนวตั้งฟังก์ชั่นฟังก์ชั่นเป็นคุณสมบัติ CSS Gap พวกเขาให้วิธีที่มีประสิทธิภาพในการเพิ่มระยะห่างที่สอดคล้องกันระหว่างองค์ประกอบเด็กภายในภาชนะ

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

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

ทิศทางเค้าโครง

ตัวเลือกทิศทางเค้าโครงใน Divi 5 (คุณสมบัติเฟล็กทิศทางใน CSS) เป็นหนึ่งในการควบคุมพื้นฐานที่สุด มันจะกำหนดแกนหลักตามองค์ประกอบของเด็กภายในภาชนะบรรจุ

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

ด้วย แถว ย้อนกลับ รายการยังคงจัดเรียงในแนวนอน แต่ในทิศทางตรงกันข้าม

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

คอลัมน์ย้อนกลับ ทำงานเหมือนกับคอลัมน์การซ้อนรายการภายในคอนเทนเนอร์ในแนวตั้ง แต่กลับด้าน

แสดงเนื้อหา

ตัวเลือก เนื้อหา Justify ของ Divi 5 (คุณสมบัติที่เหมาะสมใน CSS) ควบคุมการจัดตำแหน่งของรายการ Flex ตามแกนหลักของคอนเทนเนอร์ Flex

ตัวเลือกรวมถึง การเริ่มต้น (Flex-start ใน CSS) ซึ่งจัดเรียงรายการกับจุดเริ่มต้นของแกนหลัก ศูนย์ จัดเรียงรายการให้อยู่ตรงกลางของการเข้าถึงหลัก เมื่อคุณใช้ทิศทางเค้าโครง> แถวรายการจะอยู่ตรงกลางในแนวนอน หากคุณใช้ทิศทางเค้าโครง> คอลัมน์รายการจะอยู่ตรงกลางในแนวตั้งสิ้นสุดการจัดเรียงรายการให้เข้ากับส่วนท้าย (ทั้งขวาหรือล่างขึ้นอยู่กับการเลือกแถวหรือคอลัมน์ของคุณ)

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

จัดเรียงรายการ

ตัวเลือกการจัดเรียงรายการ(คุณสมบัติการจัดตำแหน่ง CSS) ในการตั้งค่า FlexBox ของ Divi 5 ควบคุมว่ารายการ Flex จัดเรียงตามแนวแกนข้ามของ Flex Container ตัวเลือกนี้แตกต่างจากการปรับเนื้อหาซึ่งจัดเรียงรายการตามแกนหลัก

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

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

การห่อเลย์เอาต์

ในการตั้งค่า FlexBox ของ Divi 5 การห่อเลย์เอาต์ (คุณสมบัติ Flex-Wrap CSS) กำหนดว่าจะเกิดอะไรขึ้นเมื่อรายการ Flex ภายในคอนเทนเนอร์ Flex หมดพื้นที่เพื่อห่อไว้บนบรรทัดถัดไปเมื่อพื้นที่แน่น มีสามตัวเลือกใน Divi 5 รวมถึงไม่มีห่อห่อและห่อย้อนกลับ

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

การควบคุมแบบยืดหยุ่นในระดับโมดูล

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

ข้อดีของ FlexBox

FlexBox ใน Divi 5 ไม่ได้เป็นเพียงการอัพเกรดทางเทคนิค มันเป็นวิธีที่ดีกว่าในการสร้างเว็บไซต์ที่ทันสมัยและตอบสนองได้ง่ายขึ้นและมีประสิทธิภาพมากขึ้น ด้วยการรวม FlexBox เข้ากับ Visual Builder Divi 5 ช่วยให้ผู้ใช้ทุกระดับทักษะสามารถควบคุมพลังของ CSS ได้โดยไม่ต้องเขียนโค้ด นี่คือเหตุผลบางประการที่ FlexBox เป็นอัพเกรดที่มีผลกระทบจาก Divi 4:

การควบคุมเค้าโครงไม่มีรหัสที่ใช้งานง่าย

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

การออกแบบที่ตอบสนองดีขึ้น

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

FlexBox + แถวซ้อนกัน

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

FlexBox + กลุ่มโมดูล

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

ปรับปรุงประสิทธิภาพและความเรียบง่าย

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

เทมเพลต flexbox prebuilt สำหรับการเริ่มต้นอย่างรวดเร็ว

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

เวิร์กโฟลว์การออกแบบในอนาคต

ในขณะที่ Divi 5 ยังคงพัฒนาอย่างต่อเนื่องในช่วงอัลฟ่าสาธารณะระบบเลย์เอาต์ Flexbox ของมันจะวางตำแหน่งผู้ใช้ Divi ไว้ในระดับแนวหน้าของการออกแบบเว็บที่ทันสมัย ด้วยการเรียนรู้ FlexBox ตอนนี้คุณกำลังเตรียมทักษะที่สอดคล้องกับมาตรฐานอุตสาหกรรมเพื่อให้มั่นใจว่าเว็บไซต์ของคุณยังคงปรับให้เข้ากับการอัปเดตในอนาคต

ปลดล็อกศักยภาพสร้างสรรค์ด้วย FlexBox ใน Divi 5

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