Softonic

ตัวสร้าง CSS Flexbox

ขั้นตอน 1 / 2 สร้าง CSS
ถัดไป

Flexbox คือตัวเลือกหลักสำหรับเลย์เอาต์มิติเดียว: แถวการ์ด, nav bar, hero ที่จัดกลาง, ฟอร์ม โมเดล container-and-item ทรงพลัง แต่คุณสมบัติมากมายของมันโต้ตอบกันในแบบที่ไม่เห็นได้ชัดเจน ตัวสร้างนี้ช่วยลดการเดาเมื่อตั้งค่า container: เลือก flex-direction, justify-content, align-items, flex-wrap และ gap แล้วได้กฎ CSS ที่สะอาด พร้อมคัดลอกไปวางใน stylesheet ได้ทันที

วิธีสร้าง CSS

  1. 1

    เลือกทิศทาง

    เลือก row, column หรือเวอร์ชันกลับด้าน ตัวนี้กำหนด flex-direction ซึ่งเป็นแกนที่ item เรียงไปตามนั้น

  2. 2

    ตั้ง justify-content

    เลือกวิธีกระจาย item ตามแกนหลัก: start, center, space-between, space-around หรือ end

  3. 3

    ตั้ง align-items

    เลือกวิธีจัด item บนแกนขวาง: stretch, start, center หรือ end

  4. 4

    ตั้ง gap และ wrap

    เพิ่มระยะห่างระหว่าง item เป็นพิกเซล และเลือกว่า item จะตัดบรรทัดใหม่หรือไม่

  5. 5

    คัดลอก CSS

    ตัวสร้างจะแสดงกฎของ container พร้อมทุกคุณสมบัติ พร้อมวางลงใน stylesheet ได้เลย

คุณสมบัติของ container

คุณสมบัติ ค่า เอฟเฟกต์
flex-direction row / column / row-reverse / column-reverse แกนหลัก
flex-wrap nowrap / wrap / wrap-reverse item ตัดบรรทัดหรือไม่
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly การกระจายตาม main-axis
align-items flex-start / center / flex-end / baseline / stretch การจัดเรียง cross-axis ของแต่ละบรรทัด
align-content ค่าเดียวกัน + space-between / space-around เมื่อ wrap การกระจายบรรทัดตาม cross-axis
gap (row-gap, column-gap) ความยาว ระยะห่างระหว่าง item

คุณสมบัติของ item

คุณสมบัติ ค่า เอฟเฟกต์
flex-grow 0+ (ไม่มีหน่วย) ส่วนแบ่งพื้นที่เหลือที่ดูดซับ
flex-shrink 0+ (ไม่มีหน่วย) ส่วนแบ่งพื้นที่ล้นที่หด
flex-basis ความยาว หรือ auto ขนาดเริ่มต้นก่อน grow/shrink
flex shorthand (1 1 auto, ฯลฯ) ทั้งสามรวมในที่เดียว
align-self auto / flex-start / center / flex-end / baseline / stretch แทนที่ align-items สำหรับ item เดียว
order จำนวนเต็ม จัดลำดับภาพใหม่โดยไม่เปลี่ยน DOM

ทริก flex: 1

flex: 1 เป็น shorthand ของ flex: 1 1 0% ทำให้ item:

  • ขยายเต็มพื้นที่ที่มี (grow: 1)
  • หดได้ถ้าจำเป็น (shrink: 1)
  • เริ่มจากขนาดศูนย์ (basis: 0%)

สำหรับคอลัมน์กว้างเท่ากัน ใส่ flex: 1 ทุก item จะแบ่งสมบูรณ์ สำหรับ sidebar ที่ไม่ควรหดต่ำกว่าคอนเทนต์ ใช้ flex: 0 0 240px (ไม่ grow ไม่ shrink basis 240px)

แพตเทิร์นที่ใช้บ่อย

Hero ที่จัดกลาง

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar โลโก้ซ้าย ลิงก์ขวา

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* push right */
  display: flex;
  gap: 1rem;
}

แถวการ์ดที่ตอบสนอง

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum before wrapping */
}

ฟิลด์ฟอร์มกับปุ่ม (input ยืดหยุ่น, ปุ่มคงที่)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox กับ Grid

  • Flexbox: มิติเดียว (แถว หรือ คอลัมน์) เหมาะที่สุดเมื่อขนาดของ item ขึ้นกับคอนเทนต์ หรือเมื่อกระจายพื้นที่ตามบรรทัดเดียว
  • Grid: สองมิติ (แถวและคอลัมน์ที่มี track ชัดเจน) เหมาะที่สุดเมื่อเลย์เอาต์มีโครงสร้างทั้งแถวและคอลัมน์พร้อมกัน

สำหรับ nav bar หรือสแต็กการ์ด: Flexbox สำหรับ grid ของการ์ดสินค้าที่มีหลายแถวเรียงตรงกัน: CSS Grid หลายหน้าจริงใช้ทั้งสองอย่าง เลย์เอาต์ Grid ในหน้า กับ Flexbox ภายในคอมโพเนนต์

gotcha ที่พบบ่อย

  • item ไม่เต็ม container: ดีฟอลต์ align-items: stretch ใช้เฉพาะเมื่อ item ไม่มี height คงที่ ถ้ามี height ชัดเจน มันจะอยู่ที่ขนาดนั้น
  • gap ไม่ทำงาน: ตรวจสอบการรองรับของเบราว์เซอร์ Flex gap มาช้า Safari <14.1 ไม่รองรับ ตอนนี้ใช้ได้ทั่วถึงตั้งแต่ 2024+
  • child ของ column flex ยุบ: column flex มี align-items: stretch เป็นดีฟอลต์ ซึ่งยืด item ให้กว้างเท่า container ถ้า child หนึ่งตั้ง width ไว้ มันจะหลุดออกมา
  • order เป็นเชิงภาพเท่านั้น: screen reader และการนำทางด้วยคีย์บอร์ดตามลำดับ DOM อย่าใช้ order เพื่อทำให้คอนเทนต์มีความหมาย ใช้เพื่อความสวยทางภาพเท่านั้น

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

Grid สำหรับเลย์เอาต์หน้าสองมิติ (แถวและคอลัมน์ด้วยกัน) Flexbox สำหรับการกระจายมิติเดียว (nav bar, แถวปุ่ม, สแต็ก) ภายในเซลล์ Grid ก็ใช้ Flexbox สำหรับเลย์เอาต์ภายในได้ UI ที่ซับซ้อนส่วนใหญ่ใช้ทั้งสอง

เพราะดีฟอลต์ flex-shrink คือ 1 แต่ดีฟอลต์ min-width คือ auto ซึ่งเท่ากับความกว้างคอนเทนต์ ตั้ง min-width: 0 (หรือ min-inline-size: 0) ที่ item เพื่อให้หดต่ำกว่าขนาด intrinsic ได้

display: flex; justify-content: center; align-items: center; ที่ container ครอบคลุมกรณี “จัดกลางสิ่งนี้” ส่วนใหญ่ด้วยสองบรรทัด

ได้ ในเบราว์เซอร์สมัยใหม่ทั้งหมด Safari มาช้า (เพิ่มใน 14.1, เมษายน 2021) ปัจจุบันเบราว์เซอร์หลักทุกตัวรองรับ เปลี่ยนระยะห่างที่อิง margin มาเป็น gap เมื่อทำได้ ง่ายกว่ามาก

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

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือตรวจสอบหมายเลขโทรศัพท์

ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966