พลังที่เหลือเชื่อของ Flexbox

Sep 10, 2025
วิธีการ

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

พื้นฐาน Flexbox

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

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

วิธีใช้ Flexbox

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

ด้วย Divs ลูกของเราในสถานที่เราสามารถตั้งค่าคุณสมบัติการแสดงผลของคอนเทนเนอร์ของผู้ปกครอง ดิ้น . 

 Flex Container {
จอแสดงผล: Flex;
}

ทิศทางเลย์เอาต์

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

 Flex Container {
จอแสดงผล: Flex;
ดิ้นทิศทาง: แถว;
}

Flex Container {
จอแสดงผล: Flex;
Flex-Direction: คอลัมน์;
}

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

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

 Flex Container {
จอแสดงผล: Flex;
Flex-Direction: Row-Reverse;
}

Flex Container {
จอแสดงผล: Flex;
Flex-Direction: คอลัมน์ย้อนกลับ;
}

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

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

ปรับการจัดตำแหน่ง

การตั้งค่าของ Flexbox ยังให้วิธีการสองวิธีที่แตกต่างกันสำหรับการจัดตำแหน่งเนื้อหา: แนวตั้งและแนวนอน นี่คือตัวเลือกการจัดตำแหน่งแนวนอนของคุณสำหรับรายการภายในคอนเทนเนอร์แบบยืดหยุ่น:

ดิ้น : รายการที่ตั้งค่าไปยังจุดเริ่มต้นของแถว (ซ้ายเว้นแต่คุณจะกลับเลย์เอาต์)

ศูนย์ : รายการที่อยู่กึ่งกลางภายในแถว

ดิ้น : รายการที่ตั้งไว้ในตอนท้ายของแถว (ขวาเว้นแต่คุณจะกลับรายการเค้าโครง)

ช่องว่างระหว่าง : รายการกระจายอย่างสม่ำเสมอตามแถว

พื้นที่รอบ ๆ : รายการกระจายอย่างสม่ำเสมอตามแถวที่มีพื้นที่เท่ากันทั้งสองด้านของแต่ละองค์ประกอบ

ดังนั้นรหัสอาจมีลักษณะดังนี้: 

 Flex Container {
จอแสดงผล: Flex;
ดิ้นทิศทาง: แถว;
จัดตำแหน่งเนื้อหา: Flex-Start Flex-end | ศูนย์ | ช่องว่างระหว่าง | พื้นที่รอบ | ยืด;
}

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

ดิ้น : รายการที่สอดคล้องกับด้านบนของแถว

ศูนย์ : รายการมีศูนย์กลางอยู่ที่แถว

ดิ้น : รายการที่สอดคล้องกับด้านล่างของแถว

ยืด : รายการที่ยืดข้ามความสูงของแถว

เกี่ยวกับพื้นฐาน : รายการที่สอดคล้องกับพื้นฐานของพวกเขา (บรรทัดจินตภาพที่ข้อความตั้งอยู่)

รหัสอาจมีลักษณะเช่นนี้: 

 Flex Container {
จอแสดงผล: Flex;
ดิ้นทิศทาง: แถว;
align-items: flex-start Flex-end | ศูนย์ | พื้นฐาน | ยืด;
}

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

 Flex Container {
จอแสดงผล: Flex;
Flex-wrap: ห่อ;
}

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

การปรับขนาด Flex

Flex Children สามารถเปลี่ยนความกว้างหรือความสูงของพวกเขา (ขึ้นอยู่กับทิศทางเค้าโครงของคอนเทนเนอร์) เพื่อกรอกพื้นที่ว่าง

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

 รายการแบบยืดหยุ่น {
Flex-Shrink: & Lt; จำนวน & GT ;;
Flex-Grow: & lt; จำนวน & gt ;;
Flex- พื้นฐาน: & lt; ความยาว & gt; | อัตโนมัติ;
}

ลองดูสิ่งที่ตัวเลือกเหล่านี้ทำ:

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

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

 รายการแบบยืดหยุ่น {
จอแสดงผล: Flex;
ดิ้นทิศทาง: แถว;
align-items: flex-start Flex-end | ศูนย์ | พื้นฐาน | ยืด;
}

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

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

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

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

 รายการแบบยืดหยุ่น {
สั่งซื้อ: & lt; จำนวนเต็ม & gt ;;
}

ทำไมฉันต้องใช้มัน

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

ลองดูที่ตัวอย่างในภาพด้านล่าง - หลายอย่างที่คุณอาจเคยเห็นทั่วทั้งเว็บ เกือบทั้งหมดจะใช้ CSS จำนวนมาก (โดยเฉพาะในขนาดหน้าจอที่แตกต่างกัน) แต่ใช้เพียงไม่กี่เส้นที่เรียบง่ายเพื่อให้บรรลุด้วย FlexBox หากต้องการดูตัวอย่างเหล่านี้ในการดำเนินการเยี่ยมชม Flexbox.webflow.com .

วิธีการ - บทความยอดนิยม

วิธีการ photoshop ใครบางคนในภาพ

วิธีการ Sep 10, 2025

(เครดิตภาพ: อนาคต, Matt Smith) การเรียนรู้วิธีการ Pho..

วิธีการออกแบบประสบการณ์ Chatbot

วิธีการ Sep 10, 2025

ไม่ว่าเราจะยอมรับหรือไม่หรือไม่แพลตฟอร์มการ..

วิธีการฝึกฝนมัสยิดสิ่งมีชีวิต

วิธีการ Sep 10, 2025

เมื่อพูดถึง การวาดภาพสิ่งมีชีวิตที่น่าเชื..

วิธีการสร้างตัวการ์ตูนขนยาว

วิธีการ Sep 10, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 หน้า 2 ..

วิธีการวาดด้วยภาพความสัมพันธ์สำหรับ iPad

วิธีการ Sep 10, 2025

ภาพความสัมพันธ์สำหรับ iPad เป็นสิ่งที่ยอดเย..

วิธีการออกแบบแบบฟอร์มตอบสนองและไม่เชื่อเรื่องพระเจ้า

วิธีการ Sep 10, 2025

ไม่ว่าจะเป็นการไหลของการลงทะเบียนหรือสเต็ปห..

บทนำสู่การทดสอบส่วนหน้า

วิธีการ Sep 10, 2025

หน้า 1 จาก 2: การทดสอบส่วนหน้าประเภทต่า..

วิธีการสร้างรถสปอร์ตที่สมจริง

วิธีการ Sep 10, 2025

ในช่วงหลายปีที่ผ่านมาฉันได้รับการฝึกฝนทักษะ..

หมวดหมู่