ไวยากรณ์
รูปแบบของคุณสมบัติ CSS flex มีดังนี้:
Selector { flex: /*value*/ }
ตัวอย่างที่ 1: จัดวางซ้าย-ขวาด้วย justify-content
<!DOCTYPE html> <html> <head> <style> #container { display: flex; flex-direction: row; justify-content: space-between; margin: 2%; padding: 15%; align-self: center; background: url("https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb 1.2.1&auto=format&fit=stretch&w=600&q=80"); color: white; } div > div { border: 2px solid red; } </style> </head> <body> <div id="container"> <div>Left</div> <div>Right</div> </div> </body> </html>
ตัวอย่างที่ 2: จัดวางแบบคอลัมน์พับบรรทัด (column wrap)
<!DOCTYPE html> <html> <head> <style> #container { height: 250px; display: flex; flex-flow: column wrap; padding: 2%; background: url("https://images.unsplash.com/photo-1523830213227-f76e0415a976?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=60") 0; } img { margin: 2%; width: 60px; border-radius: 25%; } </style> </head> <body> <div id="container"> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" /> </div> </body> </html>
ตัวอย่างแรกใช้ justify-content: space-between เพื่อจัดให้รายการชิดขอบซ้าย-ขวา ส่วนตัวอย่างที่สองใช้ flex-flow: column wrap เพื่อจัดวางรายการเป็นคอลัมน์และพับบรรทัดเมื่อพื้นที่ไม่พอ
