CSS Flex Responsive
Flexbox ที่ตอบสนอง
คุณได้เรียนรู้จาก บท CSS Media Queries ที่คุณสามารถใช้การสืบค้นสื่อเพื่อสร้างเค้าโครงที่แตกต่างกันสำหรับขนาดหน้าจอและอุปกรณ์ต่างๆ
แล็ปท็อปและเดสก์ท็อป:
โทรศัพท์มือและแท็บเล็ต:
ตัวอย่างเช่น หากคุณต้องการสร้างเค้าโครงแบบสองคอลัมน์สำหรับขนาดหน้าจอส่วนใหญ่ และรูปแบบหนึ่งคอลัมน์สำหรับขนาดหน้าจอขนาดเล็ก (เช่น โทรศัพท์และแท็บเล็ต) คุณสามารถเปลี่ยนflex-directionจากrowเป็นcolumn
ที่จุดสั่งหยุดเฉพาะ (800px ใน ตัวอย่างด้านล่าง):
ตัวอย่าง
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
อีกวิธีหนึ่งคือการเปลี่ยนเปอร์เซ็นต์ของflexคุณสมบัติของรายการ flex เพื่อสร้างเค้าโครงที่แตกต่างกันสำหรับขนาดหน้าจอต่างๆ โปรดทราบว่าเราต้องรวมflex-wrap: wrap;ไว้ในคอนเทนเนอร์แบบยืดหยุ่นเพื่อให้ตัวอย่างนี้ทำงาน:
ตัวอย่าง
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
แกลเลอรี่ภาพที่ตอบสนองโดยใช้ Flexbox
ใช้ flexbox เพื่อสร้างแกลเลอรีรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งจะแตกต่างกันไประหว่างรูปภาพสี่ภาพ สองภาพ หรือเต็มความกว้าง ขึ้นอยู่กับขนาดหน้าจอ:
เว็บไซต์ที่ตอบสนองโดยใช้ Flexbox
ใช้ flexbox เพื่อสร้างเว็บไซต์ที่ตอบสนอง ซึ่งประกอบด้วยแถบการนำทางที่ยืดหยุ่นและเนื้อหาที่ยืดหยุ่น: