แปลงฟรี

CSS เฟล็กซ์บ็อกซ์ เครื่องกำเนิดเค้าโครง

สร้างเค้าโครง CSS Flexbox ด้วยสายตาพร้อมการแสดงตัวอย่างสด ปรับทิศทางแบบยืดหยุ่น ปรับเนื้อหา จัดเรียงรายการ และอื่นๆ ได้ฟรีและฝั่งไคลเอ็นต์

ดูตัวอย่างสด
1
2
3
4
5
ดิ้นทิศทาง
ดิ้นห่อ
ปรับเนื้อหา
จัดรายการ
ช่องว่าง (8px)
0px32px64px
เอาต์พุต CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

.item {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 60px;
  text-align: center;
}

เกี่ยวกับเครื่องมือนี้

สร้างและปรับแต่งเนื้อหาด้วย Css Flexbox Generator โดยตรงในเบราว์เซอร์ของคุณ กำหนดการตั้งค่าของคุณ สร้างเอาต์พุต และดาวน์โหลดหรือคัดลอกผลลัพธ์ ทุกอย่างทำงานฝั่งไคลเอ็นต์ — ข้อมูลของคุณยังคงเป็นส่วนตัวและประมวลผลได้ทันที

วิธีใช้งาน

  1. กำหนดการตั้งค่าและตัวเลือกให้ตรงกับความต้องการของคุณ
  2. คลิกสร้างเพื่อสร้างเอาต์พุตของคุณ
  3. ดูตัวอย่างผลลัพธ์และทำการปรับเปลี่ยนหากจำเป็น
  4. ดาวน์โหลดไฟล์เอาต์พุตหรือคัดลอกไปยังคลิปบอร์ดของคุณ

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

ฉันสามารถปรับแต่งเอาต์พุตที่สร้างขึ้นได้หรือไม่
ใช่. เครื่องมือนี้มีตัวเลือกการปรับแต่งที่หลากหลายเพื่อปรับแต่งผลลัพธ์ให้ตรงตามความต้องการเฉพาะของคุณ ปรับการตั้งค่าก่อนสร้างหรือสร้างใหม่ด้วยตัวเลือกต่างๆ
เนื้อหาที่สร้างขึ้นใช้งานได้ฟรีหรือไม่?
ใช่. ทุกสิ่งที่คุณสร้างด้วยเครื่องมือนี้เป็นของคุณเพื่อใช้เพื่อวัตถุประสงค์ส่วนตัว การศึกษา หรือเชิงพาณิชย์โดยไม่มีข้อจำกัดหรือข้อกำหนดการระบุแหล่งที่มา
สิ่งนี้จำเป็นต้องมีบัญชีหรือไม่?
ไม่ เครื่องมือนี้พร้อมใช้งานทันทีโดยไม่ต้องสมัคร ไม่มีอีเมล และไม่ต้องลงทะเบียน เพียงเปิดหน้าและเริ่มสร้าง
ข้อมูลอินพุตของฉันถูกเก็บไว้เป็นส่วนตัวหรือไม่?
ใช่. การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลอินพุตและเอาต์พุตที่สร้างขึ้นจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกใดๆ