FlexBox คืออะไร (และทำไมคุณควรใช้มัน)

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

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

FlexBox คืออะไร

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

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

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

ตัดสินใจว่าปุ่มกลางควรใช้พื้นที่มากกว่าปุ่มอื่น ๆ :

หรือคุณอาจต้องการให้ปุ่มวางซ้อนโดยอัตโนมัติเมื่อหน้าจอแคบลง:

FlexBox ทำให้ทั้งหมดนี้เป็นไปได้ด้วยคุณสมบัติง่ายๆเช่นการปรับเนื้อหา, Flex-wrap และ Flex-Grow

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

คุณอาจคิดว่า: ฉันไม่สามารถทำสิ่งนี้กับระยะขอบและช่องว่างภายในได้หรือไม่?

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

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

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

ทิศทางงอมีผลต่อการจัดตำแหน่งอย่างไร

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

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

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

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

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

คุณสมบัติไวยากรณ์และคุณสมบัติ FlexBox ทั่วไป

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

.container {
display: flex;
}

จากนั้นคุณใช้คุณสมบัติ FlexBox ที่แตกต่างกันเพื่อควบคุมพฤติกรรม ตัวอย่างเช่น Jerify-Content ตัดสินใจว่ารายการเว้นระยะห่างตามแกนหลัก (ซึ่งตั้งค่าเป็นแนวนอนโดยค่าเริ่มต้นทิศทางแบบยืดหยุ่น: แถว) ใช้ Flex-start เพื่อจัดเรียงรายการทางด้านซ้าย Flex-end เพื่อผลักดันให้ถูกต้องตรงกลางเพื่อจัดกึ่งกลางหรือพื้นที่ระหว่างและพื้นที่รอบด้านเพื่อกระจายออกไปอย่างสม่ำเสมอ

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

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

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

ทำไมต้องใช้ FlexBox

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

• การจัดตำแหน่งที่ง่ายขึ้น: คุณสมบัติเช่น Valify-Content และ Align-Atems Center หรือรายการอวกาศโดยไม่ต้องพึ่งพาการปรับแต่งระยะขอบหรือคลาสผู้ช่วย
• ตอบสนองโดยค่าเริ่มต้น: รายการเติบโตตามธรรมชาติหดหรือห่อขึ้นอยู่กับพื้นที่ของพวกเขา สิ่งนี้ส่งผลให้เค้าโครงที่สะอาดกว่าที่ปรับโดยไม่ต้องเพิ่มจุดพัก
• ระยะห่างและปรับขนาดอัตโนมัติ: คุณควบคุมว่าองค์ประกอบแบ่งปันพื้นที่กับคุณสมบัติเช่น Flex-Grow, Flex-Shrink และ Flex-basis อย่างไรทำให้ของเหลวเลย์เอาต์แทนที่จะแก้ไข
• การจัดลำดับใหม่โดยไม่ต้องเปลี่ยน HTML: คุณสามารถเปลี่ยนลำดับภาพขององค์ประกอบโดยไม่ต้องสัมผัส HTML โครงสร้างยังคงสะอาดในขณะที่เลย์เอาต์ปรับสำหรับหน้าจอที่แตกต่างกัน
• แฮ็กเค้าโครงน้อยลง: คุณไม่จำเป็นต้องลอย, clearfixes หรือสคริปต์การจับคู่ความสูงอีกต่อไป FlexBox แทนที่ตัวเลือกที่ทันสมัยและเชื่อถือได้

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

ทำไม FlexBox ถึงดีกว่ากริด

กริดเป็นระบบเค้าโครงยอดนิยมอีกระบบหนึ่งเช่น FlexBox อย่างไรก็ตามทั้งสองถูกสร้างขึ้นสำหรับกรณีการใช้งานที่แตกต่างกัน

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

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

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

แต่ไม่ใช่ทุกรูปแบบที่ต้องการการวางแผนระดับนั้น

ส่วนใหญ่ส่วน UI จะไหลไปในทิศทางเดียว แถวของการ์ด, บล็อกข้อความบวก-ข้อความและลิงก์นำทางไปตามแกนหนึ่งไม่ใช่สอง นั่นคือที่ที่ Flexbox เหมาะกับ

ในเค้าโครง FlexBox การ์ดจะจัดเรียงในทิศทางเดียว (แถวหรือคอลัมน์) จากนั้นห่อและเว้นระยะตามกฎคอนเทนเนอร์

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

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

Flexbox ใน Divi 5

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

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

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

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

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

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

เรียนรู้ทุกอย่างเกี่ยวกับระบบ FlexBox ของ Divi 5

โครงสร้างแถวใหม่

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

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

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

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

นอกจากนี้คุณยังสามารถเปลี่ยนวิธีการจัดเรียงคอลัมน์ภายในแถวโดยใช้ โครงสร้างคอลัมน์เปลี่ยน

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

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

FlexBox ทำงานอย่างไรใน Divi 5

หากคุณเริ่มต้นใช้งานนี่คือคำแนะนำอย่างรวดเร็วที่จะช่วยให้คุณรู้สึกมั่นใจเมื่อใช้ FlexBox ใน Divi 5

การควบคุมเค้าโครง

เมื่อคุณสลับส่วนแถวหรือคอลัมน์เป็นเลย์เอาต์ Flex ชุดการควบคุมเลย์เอาต์ใหม่จะปรากฏขึ้นใน การตั้งค่าการออกแบบ> เค้าโครง สิ่งเหล่านี้ให้การควบคุม Visual Flexbox ติดกับตัวเลือกปกติของคุณ

• (1) สไตล์เลย์เอาต์: นี่คือที่ที่คุณเปิดใช้งาน Flex เมื่อตั้งค่าตัวเลือกเฉพาะของ Flex อื่น ๆ เช่นทิศทางการจัดตำแหน่งและการเว้นวรรคจะปรากฏให้เห็น
• (2) ช่องว่างแนวนอน: เพิ่มช่องว่างระหว่างรายการจากซ้ายไปขวา
• (3) ช่องว่างแนวตั้ง: ตั้งค่าช่องว่างระหว่างองค์ประกอบที่ซ้อนกันเมื่อใช้เลย์เอาต์คอลัมน์
• (4) ทิศทางเค้าโครง: เปลี่ยนโฟลว์แถวคอลัมน์หรือทิศทางกลับด้านเพื่อให้รายการสามารถจัดเรียงเคียงข้างกันหรือด้านบนลงล่าง
• (5) ปรับเนื้อหา: จัดเรียงรายการตามแกนหลัก คุณสามารถจัดพวกเขาผลักพวกเขาไปด้านหนึ่งหรือกระจายออกไป
• (6) จัดเรียงรายการ: จัดเรียงรายการตามแกนข้ามซึ่งมีประโยชน์เมื่อจัดเรียงรายการในแนวตั้งภายในแถวแนวนอน
• (7) การห่อเลย์เอาต์: สิ่งนี้ช่วยให้รายการย้ายไปยังบรรทัดถัดไปเมื่อพื้นที่หมด มีประโยชน์ในขณะที่สร้างเลย์เอาต์ที่ตอบสนองต่อขนาดหน้าจอแทนที่จะทำลาย

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

การจัดเรียงองค์ประกอบในสองแถวเป็นเรื่องง่ายโดยไม่ต้องสืบค้นสื่อหรือวิธีแก้ปัญหาด้วยตนเอง

การควบคุมคอลัมน์และการปรับขนาด

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

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

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

การควบคุมการสั่งซื้อ

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

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

กรณีการใช้งานจริงของ FlexBox

ลองดูกรณีการใช้ FlexBox อีกสองสามรายการที่ตอนนี้ง่ายขึ้นด้วย Divi 5

1. จัดเรียงทุกอย่างในแนวตั้งกับ Flex

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

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

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

2. ทำให้ความสูงของการ์ดเท่ากันโดยอัตโนมัติ

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

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

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

3. ปุ่มห่อโดยอัตโนมัติข้ามจุดพัก

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

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

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

Divi + Flexbox ทำให้รู้สึก

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

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