คู่มือผู้เริ่มต้นเกี่ยวกับคุณสมบัติ FlexBox CSS

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

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

CSS Flexbox คืออะไร?

การจราจรติดขัดบนเดสก์ท็อปเปลี่ยนการออกแบบเว็บ นักพัฒนาต้องการเลย์เอาต์ที่ทำงานบนโทรศัพท์แท็บเล็ตและเดสก์ท็อป วิธีการเก่ามักล้มเหลว

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

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

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

วิธีดั้งเดิมทำให้ตัวเลือกการเว้นระยะแบบสุ่ม: 10px ที่นี่, 20px, 40px ที่อื่น ค่าที่กระจัดกระจายเหล่านี้ทำให้เกิดความไม่สอดคล้องกันและทำให้ยากที่จะรู้ว่าระยะห่างใดที่ใช้ คุณสมบัติช่องว่างลบการคาดเดาโดยใช้กฎที่สอดคล้องกันหนึ่งรายการสำหรับองค์ประกอบทั้งหมด

คู่มือด่วนสำหรับ FlexBox และคุณสมบัติของมัน

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

จอแสดงผล: Flex

เปลี่ยนองค์ประกอบใด ๆ ให้เป็นคอนเทนเนอร์ Flex โดยเพิ่มจอแสดงผล: Flex เด็กโดยตรงของมันกลายเป็นรายการที่ยืดหยุ่น รายการเรียงลำดับเป็นแถวโดยค่าเริ่มต้นแทนที่จะเป็นซ้อนกันเช่นองค์ประกอบบล็อกมาตรฐาน อาการปวดหัวระยะห่างของคุณหายไปเนื่องจากรายการ Flex เป็นไปตามกฎที่แตกต่างจากองค์ประกอบปกติ คอนเทนเนอร์ตอนนี้ควบคุมว่าเด็ก (หรือรายการ) ประพฤติตนอย่างไรและคุณจะได้รับผลลัพธ์ที่คาดการณ์ได้แทนที่จะเป็นความประหลาดใจ CSS ปกติ

ทิศทางของดิ้น

เลือกรายการทิศทางที่ไหล ใช้แถวสำหรับการจัดเรียงจากซ้ายไปขวา

และคอลัมน์เพื่อสแต็กรายการในแนวตั้ง

เพิ่มย้อนกลับไปที่หนึ่งและรายการพลิกคำสั่งซื้ออย่างสมบูรณ์

ตัวเลือกนี้ตั้งค่าแกนกลางของคุณซึ่งมีผลต่อการทำงานของคุณสมบัติอื่น ๆ

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

แสดงความชอบธรรม

คุณสมบัตินี้กระจายพื้นที่ที่เหลืออยู่ตามแกนกลางของคุณ รายการใช้สิ่งที่พวกเขาต้องการจากนั้นคุณสมบัตินี้จัดการส่วนที่เหลือ ใช้ Flex-start เพื่อรวมทุกอย่างในตอนแรกให้อยู่ตรงกลางเพื่อจัดกลุ่มรายการตรงกลางและ Flex-end เพื่อนำทุกอย่างไปสู่จุดสิ้นสุด ในเวลาเดียวกันพื้นที่ระหว่างนั้นใช้เพื่อกระจายรายการออกจากกันด้วยช่องว่างเท่ากัน ค่า Space-Round ให้พื้นที่แต่ละรายการที่เท่าเทียมกันทั้งสองด้านในขณะที่อวกาศจะสร้างช่องว่างที่เหมือนกันทุกที่

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

มันจัดการการจัดตำแหน่งบนแกนข้าม สำหรับเลย์เอาต์แนวนอนนี่หมายถึงการจัดแนวแนวตั้ง สำหรับเลย์เอาต์แนวตั้งมันควบคุมการวางตำแหน่งแนวนอน รองรับค่าเช่น Flex-start, center, flex-end, stretch และ baseline (ไม่ใช่ค่าพื้นที่-*) ตั้งค่าไว้ที่กึ่งกลางและรายการจัดเรียงตรงกลางโดยไม่คำนึงถึงความสูงของพวกเขา ค่าเริ่มต้นคือการยืด: รายการยืดเพื่อเติมเต็มขนาดข้ามของคอนเทนเนอร์ หากข้ามขนาดของคอนเทนเนอร์เป็นอัตโนมัติมันมักจะเท่ากับรายการที่สูงที่สุดเพื่อให้รายการมีความสูงเท่ากัน

เลี้ยว

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

ช่องว่าง

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

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

Divi 5 ทำให้ FlexBox Visual

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

ก่อนที่เราจะดำน้ำลึกลองดูสั้น ๆ ว่า Divi คืออะไร

Divi คืออะไร?

Divi เป็นผู้สร้างเว็บไซต์ที่ทำให้ WordPress ทำงานได้สำหรับผู้ที่ต้องการเว็บไซต์ที่ดูดีโดยไม่ต้องยุ่งยาก

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

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

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

Divi Ai ช่วยให้คุณสร้างได้อย่างรวดเร็ว

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

บอกว่าคุณต้องการข้อความและมันเขียนมัน

ขอภาพที่กำหนดเองและสร้างขึ้นมา คุณสามารถอธิบายการแก้ไขรูปภาพและดูการเปลี่ยนแปลง

นอกจากนี้ยังจัดการรหัสและสร้างส่วนใหม่เมื่อคุณถาม

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

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

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

Divi 5: ผู้สร้างเว็บไซต์พิสูจน์ในอนาคต

Divi 5 สร้างกรอบทั้งหมดขึ้นมาใหม่จากพื้นดิน

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

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

คุณได้รับวิธีการสร้างภาพแบบเดียวกันกับที่คุณรู้เพียงแค่มีรากฐานที่แข็งแกร่งกว่าอยู่ข้างใต้

มีอะไรใหม่ใน Divi 5

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

นี่คือตัวอย่างของสิ่งที่คุณได้รับ:

• ระบบเลย์เอาต์ FlexBox: การควบคุมภาพสำหรับการจัดตำแหน่งระยะห่างและการวางตำแหน่ง องค์ประกอบสามารถเติบโตหดตัวหรือห่อเป็นบรรทัดใหม่โดยอัตโนมัติ ทำงานกับแถวซ้อนกันและกลุ่มโมดูลสำหรับเลย์เอาต์ที่ซับซ้อนโดยไม่มีรหัส
• แถวซ้อนกัน: วางแถวในแถวอื่น ๆ ด้วยการทำรังที่ไม่มีที่สิ้นสุด สร้างโครงสร้างเค้าโครงที่ซับซ้อนโดยไม่มีการแก้ปัญหารหัส
• 17 โมดูล WooCommerce: ผู้สร้างหน้าผลิตภัณฑ์ที่สมบูรณ์รวมถึงแกลเลอรี่ผลิตภัณฑ์เพิ่มเข้าไปในรถเข็นความคิดเห็นการจัดอันดับประกาศหุ้น breadcrumbs, meta ผลิตภัณฑ์, upsells และอื่น ๆ โมดูลเกวียนและเช็คเอาต์เร็ว ๆ นี้
• ระบบการโต้ตอบ: สร้างป๊อปอัพสลับม้วนภาพเคลื่อนไหวเอฟเฟกต์การเคลื่อนไหวของเมาส์และทริกเกอร์วิวพอร์ต ผสมทริกเกอร์หลายตัวสำหรับพฤติกรรมที่ซับซ้อนเช่นแบนเนอร์ส่งเสริมการขายที่จางหายไปหลังจากเลื่อน
• ตัวแก้ไขที่ตอบสนอง: ให้คุณดูแก้ไขและรีเซ็ตสถานะการตอบสนองที่ตอบสนองและสถานะเหนียวสำหรับการตั้งค่าใด ๆ พร้อมกันโดยไม่ต้องเปลี่ยนโหมดมุมมองเพื่อให้เร็วขึ้นแม่นยำยิ่งขึ้นและแก้ไขความยุ่งเหยิงน้อยลง>
• Loop Builder: สร้างเนื้อหาแบบไดนามิกที่ดึงมาจากฐานข้อมูลของคุณ สร้างเค้าโครงโพสต์ที่กำหนดเองกริดผลิตภัณฑ์และส่วนที่ทำซ้ำ ทำงานร่วมกับผลิตภัณฑ์ WooCommerce
• กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า: สร้างรูปแบบที่สามารถนำกลับมาใช้ใหม่ได้สำหรับการพิมพ์เส้นขอบเงาและพื้นหลัง ใช้สิ่งเหล่านี้กับองค์ประกอบที่เข้ากันได้ใด ๆ ไม่ใช่แค่โมดูลเดียว
• ตัวแปรการออกแบบ: ตั้งค่าทั่วโลกสำหรับสี, แบบอักษร, ระยะห่าง, ตัวเลข, รูปภาพและข้อความ เปลี่ยนสีหลักของคุณหนึ่งครั้งและจะอัปเดตทุกที่โดยอัตโนมัติ
• หน่วย CSS ขั้นสูง: ใช้แคลมป์ (), calc (), min () และสูงสุด () ฟังก์ชั่นผ่านการควบคุมด้วยภาพ ไม่จำเป็นต้องใช้รหัสสำหรับการพิมพ์ที่ตอบสนองและการคำนวณระยะห่าง
• สีสัมพัทธ์และ HSL: สร้างระบบสีที่สวยงามทางคณิตศาสตร์ สร้างรูปแบบสีที่รักษาความสามัคคีโดยอัตโนมัติเมื่อเปลี่ยนสีฐาน

และอีกมากมายกำลังจะมา! ทีมพัฒนาของเรายังคงเพิ่มคุณสมบัติ ~ ทุกสองสัปดาห์ในขณะที่พวกเขาเตรียมตัวสำหรับการเปิดตัวเบต้าสาธารณะ

ภาพรวมอย่างรวดเร็วของการตั้งค่า FlexBox ของ Divi 5

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

1. การตั้งค่าแถวแรกของคุณ

เริ่มต้นด้วยการเลือกโครงสร้างแถวของคุณจากการเลือกเทมเพลตที่ขยายตัว Divi 5 มีตัวเลือกเค้าโครงอีกมากมายรวมถึงคอลัมน์ที่เท่าเทียมกันกริดหลายแถวและการตั้งค่าหลายคอลัมน์

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

2. การทำความเข้าใจทิศทางการไหลการจัดตำแหน่ง

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

สลับไปที่คอลัมน์และรายการองค์ประกอบสแต็กในแนวตั้งเช่นเค้าโครงเว็บทั่วไป

ตัวเลือกทั้งสองมาพร้อมกับเวอร์ชันย้อนกลับที่พลิกลำดับอย่างสมบูรณ์

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

สำหรับคอลัมน์การเริ่มต้นหมายถึงด้านบนกลางกลางทุกอย่างและสิ้นสุดจะผลักรายการไปด้านล่าง

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

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

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

หากคุณเลือกเค้าโครงคอลัมน์มันจะจัดการการจัดตำแหน่งแนวนอน

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

การควบคุมเหล่านี้ช่วยแก้ปวดหัวเค้าโครงทั่วไปโดยไม่มีการคำนวณ CSS แบบกำหนดเอง

3. ระยะห่างของสิ่งต่าง ๆ ออกมาพร้อมกับการควบคุมช่องว่าง

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

ตั้งค่าช่องว่างแนวนอนเป็น 20px และทุกคอลัมน์จะมีระยะห่างที่แน่นอน

เปลี่ยนช่องว่างแนวตั้งเป็น 20px และช่องว่างทั้งหมดจะอัปเดตทันที

Divi 5 รองรับหน่วย CSS ขั้นสูงเช่นความยาวและเปอร์เซ็นต์ของ Viewport คุณสามารถใช้แคลมป์ () สำหรับช่องว่างที่ตอบสนองต่อขนาดระหว่างขนาดหน้าจอ ฟังก์ชั่น CALL () ซึ่งรวมหน่วยเช่น CALC (2REM + 10PX) ก็รองรับ

การควบคุมช่องว่างที่นี่ยังรองรับตัวแปรการออกแบบ เพิ่มตัวแปรตัวเลขที่เรียกว่า "ช่องว่างคอลัมน์แนวนอน" ด้วยแคลมป์ (16PX, 2VW, 32PX) เป็นค่า ใช้ตัวแปรนั้นกับการควบคุมช่องว่างในเว็บไซต์ของคุณ

เมื่อคุณต้องการระยะห่างที่เข้มงวดมากขึ้นในภายหลังให้แก้ไขตัวแปร ทุกช่องว่างจะอัปเดตทันที

4. การควบคุมวิธีการห่อของรายการ

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

Wrap Reverse ทำสิ่งเดียวกันกับการห่อปกติ แต่พลิกทิศทาง บรรทัดใหม่ปรากฏขึ้นเหนือเส้นก่อนหน้าแทนที่จะเป็นด้านล่าง

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

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

ในทำนองเดียวกันสำหรับทิศทางคอลัมน์ตัวเลือกสำหรับการจัดแนวแนวนอน

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

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

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

5. การทำงานในขนาดหน้าจอที่แตกต่างกัน

จุดพักเจ็ดจุดของ Divi 5 ช่วยให้คุณควบคุมได้อย่างละเอียดว่าเลย์เอาต์ของคุณปรับตัวได้อย่างไร

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

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

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

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

6. การสร้างกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า

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

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

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

เริ่มต้นด้วย FlexBox ของ Divi 5 วันนี้

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

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

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