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

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

แบบนี้.

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

นี่คือบทสรุปของรหัส ในตัวอย่างนี้ เราสร้างองค์ประกอบ #main ให้เป็นคอนเทนเนอร์แบบยืดหยุ่น และปล่อยให้ส่วนหัวและส่วนท้ายเป็นองค์ประกอบบล็อก กล่าวอีกนัยหนึ่ง เฉพาะส่วนตรงกลางเท่านั้นที่จะกลายเป็น flexbox นี่คือตัวอย่างที่ทำให้เป็นคอนเทนเนอร์แบบยืดหยุ่น

#main ( จอแสดงผล: ดิ้น; ความสูงขั้นต่ำ: คำนวณ (100vh - 40vh); )

เพียงใช้ display: flex เพื่อสร้างคอนเทนเนอร์แบบยืดหยุ่น โปรดทราบว่าเรายังตั้งค่าความสูงขั้นต่ำโดยใช้ฟังก์ชัน calc() และตั้งค่า #main เป็น 100% ของความสูงของวิวพอร์ต ลบความสูงของส่วนหัวและฐาน (อย่างละ 20vh) เพื่อให้แน่ใจว่าเลย์เอาต์จะเต็มความสูงทั้งหมดของหน้าจอ แม้ว่าจะมีเนื้อหาเพียงเล็กน้อยก็ตาม ด้วยเหตุนี้ ส่วนท้ายจะไม่เพิ่มขึ้นและเหลือพื้นที่ว่างด้านล่างหากเนื้อหาใช้พื้นที่น้อยกว่าความสูงของหน้าจอ

การคำนวณความสูงขั้นต่ำนั้นค่อนข้างง่าย เนื่องจากเราใช้ box-sizing: border-box กับองค์ประกอบทั้งหมด หากเราไม่ทำเช่นนี้เราจะต้องเพิ่ม ค่าช่องว่างภายในถึงจำนวนเงินที่จะหักออก

หลังจากติดตั้งคอนเทนเนอร์ดิ้น เราจะจัดการกับองค์ประกอบดิ้น

#main > บทความ ( flex: 1; ) #main > nav, #main > กัน ( flex: 0 0 20vw; พื้นหลัง: beige; ) #main > nav ( ลำดับ: -1; )

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