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 เมื่อทำได้ ง่ายกว่ามาก

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

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

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

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

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

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

ตัวสร้างลูกศร CSS

สร้างลูกศร CSS ในเบราว์เซอร์ด้วยทิศทาง สี ขนาด และความหนาของเส้นขอบ แล้วคัดลอกกฎ.

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

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

เครื่องมือนี้มีให้บริการในภาษาอื่น