CSS Flexbox คืออะไร?

Flexbox เป็นวิธี CSS layout หนึ่งมิติสำหรับจัดเรียง items ในแถวหรือคอลัมน์ ให้ความสามารถ alignment การกระจาย และการเรียงลำดับที่ทรงพลัง

ควรใช้ Flexbox vs Grid เมื่อไหร่?

ใช้ Flexbox สำหรับ layouts หนึ่งมิติ (แถวหรือคอลัมน์) เช่น navbars แถวการ์ด หรือจัดกึ่งกลางเนื้อหา ใช้ Grid สำหรับ layouts สองมิติ (แถวและคอลัมน์)

flex-grow และ flex-shrink ทำอะไร?

Flex-grow กำหนดว่า items ขยายเติมพื้นที่อย่างไร Flex-shrink กำหนดว่า items หดเมื่อพื้นที่จำกัดอย่างไร ค่าเป็นอัตราส่วนสัมพัทธ์

จัดกึ่งกลางเนื้อหาด้วย Flexbox อย่างไร?

ตั้ง display:flex บน container แล้ว justify-content:center สำหรับแนวนอนและ align-items:center สำหรับแนวตั้ง

เครื่องมือสร้าง Flexbox

สร้างโค้ด CSS flexbox ด้วยตัวแก้ไขแบบภาพ ปรับแต่ง flex properties และดูตัวอย่างสด เครื่องมือสร้างเลย์เอาต์ flexbox ฟรี

ทิศทาง (Flex Direction)

การจัดวางแกนหลัก (Justify Content)

การจัดวางแกนรอง (Align Items)

การขึ้นบรรทัดใหม่ (Flex Wrap)

ระยะห่าง (Gap) (8px)

ตัวอย่าง

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

เกี่ยวกับเครื่องมือสร้าง Flexbox

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

• ตัวควบคุมแบบโต้ตอบสำหรับคุณสมบัติ Flexbox หลักทั้งหมด
• สร้างและแสดงตัวอย่างโค้ด CSS แบบเรียลไทม์
• รองรับ Flex Direction, Justify Content, Align Items, Wrap และ Gap

Loading tool...