ข้ามไปยังเนื้อหาหลัก
LibraTool logoLibraTool

ตัวสร้าง CSS Flexbox ฟรี

ทดลองใช้ flex direction, wrap, justify และ align บนรายการสด — และคัดลอก CSS

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
ค่าที่กำหนดไว้

เคล็ดลับ: คลิกรายการในตัวอย่างเพื่อสลับ flex-grow: 1 บนนั้น

ตัวอย่างสด
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลด

วิธีการทำงาน

สนามทดลอง flexbox แบบอินเทอร์แอกทีฟ: สลับ flex-direction, wrap, justify-content และ align-items แล้วดูไอเทมสูงสุด 10 ชิ้นจัดเรียงใหม่ทันที คลิกที่ไอเทมใดก็ได้เพื่อกำหนด flex-grow: 1 และดูว่ามันขยายพื้นที่อย่างไร โค้ด CSS อัปเดตแบบเรียลไทม์ พร้อมคัดลอกไปใช้ในโปรเจกต์ของคุณ

  1. 1
    ตั้งค่าคอนเทนเนอร์
    Direction, wrap, justify-content, align-items, gap
  2. 2
    เพิ่มไอเทม
    ไอเทม flex ที่มีหมายเลขกำกับ ตั้งแต่ 1 ถึง 10 ชิ้น
  3. 3
    ทดลองเล่น
    คลิกที่ไอเทมเพื่อสลับ flex-grow แล้วดูผลลัพธ์
  4. 4
    คัดลอกโค้ด CSS
    กฎของคอนเทนเนอร์ (และไอเทม) พร้อมวางใช้งานได้ทันที

ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดใดๆ

เครื่องมือที่เกี่ยวข้อง

🟦

ตัวสร้าง CSS Grid

ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก CSS และ HTML ที่สร้างขึ้น

ลองใช้
🌈

สร้าง CSS Gradient

สร้าง CSS gradient แบบเชิงเส้น เชิงรัศมี และรูปกรวยพร้อมตัวอย่างสดๆ คัดลอก CSS ในคลิกเดียว

ลองใช้
🎨

สร้าง CSS Box Shadow

ตัวสร้าง CSS box-shadow แบบ visual พร้อมตัวอย่างสดๆ การซ้อนหลายชั้น color picker สลับ inset และคัดลอกในคลิกเดียว มี preset ของ Material, neumorphism และ glow

ลองใช้

คำถามที่พบบ่อย