พื้นที่ทดลอง CSS Flexbox

เกี่ยวกับ พื้นที่ทดลอง CSS Flexbox

พื้นที่ทดลอง CSS Flexbox เป็นสภาพแวดล้อมการเรียนรู้แบบโต้ตอบและเครื่องมือสร้างโค้ดสำหรับโมดูล CSS Flexible Box Layout ที่ทันสมัย ปรับคุณสมบัติคอนเทนเนอร์ (flex-direction, justify-content, align-items, gap) และคุณสมบัติรายรายการ (flex-grow, flex-shrink, flex-basis, align-self, order) และรับชมเลย์เอาต์ของคุณอัปเดตแบบเรียลไทม์ เมื่อคุณได้สิ่งที่ต้องการแล้ว เพียงคัดลอก CSS และ HTML ที่พร้อมใช้งานไปวางในโปรเจกต์ของคุณได้เลย

CSS Flexbox คืออะไร?

CSS Flexbox (Flexible Box Layout) คือโมเดลเลย์เอาต์แบบมิติเดียวที่ออกแบบมาเพื่อกระจายพื้นที่ตามแกนเดียว (แถวหรือคอลัมน์) และจัดตำแหน่งรายการภายในคอนเทนเนอร์ มาแทนที่เทคนิคเก่าๆ เช่น floats และ inline-block hacks สำหรับแถบนำทาง, แถวการ์ด, เนื้อหาที่จัดกึ่งกลาง และ UI ใดๆ ที่องค์ประกอบจำเป็นต้องยืดหยุ่นตามคอนเทนเนอร์อย่างเป็นธรรมชาติ ต่างจาก CSS Grid ซึ่งเป็นแบบสองมิติ Flexbox จะโดดเด่นในการจัดวางที่เรียบง่ายกว่าซึ่งคุณสามารถควบคุมการจัดตำแหน่งได้เพียงทิศทางเดียวในแต่ละครั้ง

วิธีใช้งานพื้นที่ทดลองนี้

1. เลือกพรีเซ็ต (ไม่บังคับ): เลือก Holy Grail, Card Grid, Navbar, Hero, Modal หรือ Sticky Footer เพื่อโหลดจุดเริ่มต้นที่ใช้งานจริง แต่ละพรีเซ็ตคือเลย์เอาต์ที่ทำงานสมบูรณ์ซึ่งคุณสามารถศึกษาหรือปรับแต่งได้
2. ปรับแต่งคุณสมบัติคอนเทนเนอร์: ใช้การควบคุมแบบแยกส่วนในแผงด้านขวาเพื่อตั้งค่า flex-direction, flex-wrap, justify-content, align-items, align-content และ gap พื้นที่จำลองภาพจะอัปเดตทันที
3. แก้ไขรายการแต่ละรายการ: คลิกรายการใดก็ได้ในตัวอย่างเพื่อเลือก ปรับแต่ง order, flex-grow, flex-shrink, flex-basis และ align-self แยกจากรายการอื่น รายการที่มีการปรับแต่งจะถูกทำเครื่องหมายด้วยป้ายขนาดเล็ก
4. เพิ่มหรือลบรายการ: ใช้ปุ่มเพิ่มรายการและลบรายการที่เลือกเพื่อเปลี่ยนจำนวนรายการและดูว่าเลย์เอาต์ตอบสนองอย่างไร
5. คัดลอกโค้ด: ส่วนโค้ดที่สร้างขึ้นที่ด้านล่างจะสะท้อนถึงเลย์เอาต์ปัจจุบันของคุณเสมอ คัดลอก CSS, HTML หรือทั้งสองอย่างได้ด้วยคลิกเดียว

ข้อมูลอ้างอิงคุณสมบัติคอนเทนเนอร์

flex container คือองค์ประกอบหลักที่มี display: flex คุณสมบัติเหล่านี้จะควบคุมพฤติกรรมขององค์ประกอบย่อยทั้งหมดร่วมกัน

ข้อมูลอ้างอิงคุณสมบัติรายการ

คุณสมบัติเหล่านี้จะใช้กับรายการ flex แต่ละรายการ (ลูกของ flex container) และจะเขียนทับค่าเริ่มต้นของคอนเทนเนอร์สำหรับรายการนั้นๆ

justify-content และ align-items ต่างกันอย่างไร?

justify-content ควบคุมการจัดตำแหน่งตาม แกนหลัก (main axis) ในขณะที่ align-items ควบคุมการจัดตำแหน่งตาม แกนรอง (cross axis) แกนหลักคือทิศทางใดก็ตามที่ flex-direction กำหนดไว้ — แนวนอนสำหรับ row, แนวตั้งสำหรับ column เมื่อคุณเปลี่ยน flex-direction จาก row เป็น column แกนทั้งสองจะสลับกัน ดังนั้น justify-content จะกลายเป็นแนวตั้งและ align-items จะกลายเป็นแนวนอน การสลับนี้เป็นหนึ่งในสาเหตุของความสับสนที่พบบ่อยที่สุดเมื่อผู้คนเรียนรู้ Flexbox; ตัวบ่งชี้แกนของพื้นที่ทดลองที่อยู่ใต้ตัวอย่างจะช่วยให้มองเห็นภาพนี้ได้ชัดเจน

จะจัดองค์ประกอบให้อยู่กึ่งกลางด้วย Flexbox ได้อย่างไร?

ในการจัดตำแหน่งองค์ประกอบเดียวให้卧ู่กึ่งกลางทั้งแนวนอนและแนวตั้ง:

นี่คือการแทนที่สมัยใหม่สำหรับวิธีแก้ขัดแบบเก่าที่ใช้ margin: auto, transform: translate(-50%, -50%) หรือ position: absolute ลองทำในพื้นที่ทดลองโดยเลือกพรีเซ็ต Modal Center

คำอธิบายเลย์เอาต์พรีเซ็ตในโลกจริง

เลย์เอาต์ Holy Grail

เลย์เอาต์หน้าสามคอลัมน์แบบคลาสสิก: แถบด้านข้างซ้าย, เนื้อหาหลัก, แถบด้านข้างขวา — พร้อมส่วนหัวและส่วนท้าย ในอดีตสร้างได้ยากมากด้วย floats; Flexbox ทำให้เป็นเรื่องง่าย คอลัมน์กลางใช้ flex: 1 เพื่อดูดซับพื้นที่แนวนอนที่เหลือทั้งหมด ในขณะที่คอลัมน์ด้านข้างจะคงความกว้างตามที่ประกาศไว้

Card Grid

แถวการ์ดที่ตัดขึ้นบรรทัดใหม่เมื่อมุมมองแคบลง ใช้ flex-wrap: wrap โดยการ์ดแต่ละใบมี flex: 1 1 240px หมายความว่าการ์ดจะขยายและหดตัวแต่จะไม่แคบกว่า 240px

Navbar

แถบนำทางแนวนอนที่มีโลโก้ทางซ้ายและลิงก์ทางขวา เคล็ดลับคือ justify-content: space-between โดยมีกลุ่มโลโก้และกลุ่มลิงก์เป็นลูกสองคน พร้อมคอนเทนเนอร์ flex ภายในสำหรับลิงก์เอง

Hero Section

กองแนวตั้งที่มีเนื้อหาจัดกึ่งกลางทั้งแนวนอนและแนวตั้ง — เหมาะสำหรับส่วนฮีโร่ของหน้าแลนดิ้งเพจ ใช้ flex-direction: column, justify-content: center และ align-items: center บนคอนเทนเนอร์ที่มีความสูงมาก

Modal Center

หน้าต่างโมดอลที่จัดกึ่งกลางอย่างสมบูรณ์แบบภายในโอเวอร์เลย์ ใช้สูตรการจัดกึ่งกลางสามบรรทัดเดียวกับที่แสดงด้านบน โดยใช้กับคอนเทนเนอร์โอเวอร์เลย์แบบเต็มหน้าจอ

Sticky Footer

ส่วนท้ายที่อยู่ที่ด้านล่างของหน้าจอเมื่อเนื้อหาสั้น แต่จะถูกดันลงไปเมื่อเนื้อหายาว ทำได้โดยกำหนดให้ body มี display: flex; flex-direction: column; min-height: 100vh และเนื้อหาหลักมี flex: 1

flex-grow, flex-shrink และ flex-basis ต่างกันอย่างไร?

คุณสมบัติทั้งสามนี้ (รวมอยู่ในตัวย่อ flex) อธิบายถึงวิธีการจัดการพื้นที่ของรายการ:

• flex-basis กำหนดขนาด ในอุดมคติ ของรายการก่อนที่จะกระจายพื้นที่ว่าง ให้คิดซะว่าเป็น "จุดเริ่มต้น" ของรายการ
• flex-grow บอกว่า "ถ้ามีพื้นที่เหลือ ให้เอาส่วนแบ่งนี้ไป" ค่า 0 หมายถึงปฏิเสธที่จะขยาย; 1 หมายถึงขยายตามสัดส่วน; 2 หมายถึงเอาส่วนแบ่งเป็นสองเท่าของรายการที่มี 1
• flex-shrink บอกว่า "ถ้ามีพื้นที่ไม่พอ ให้หดตัวตามส่วนแบ่งนี้" ค่าเริ่มต้นคือ 1 (หดตัวตามสัดส่วน); 0 หมายถึงปฏิเสธที่จะหดตัว

ตัวย่อ flex: 1 จะขยายเป็น flex: 1 1 0% — ขยายเท่ากัน หดเท่ากัน พื้นฐานเป็นศูนย์ — หมายความว่าทุกรายการจะได้รับส่วนแบ่งที่เท่ากันในคอนเทนเนอร์โดยไม่คำนึงถึงเนื้อหา flex: auto ขยายเป็น flex: 1 1 auto ซึ่งจะเคารพขนาดเนื้อหาเป็นฐาน

เมื่อไหร่ควรใช้ Flexbox เทียบกับ Grid?

ใช้ Flexbox สำหรับเลย์เอาต์มิติเดียวที่รายการไหลไปในทิศทางเดียว — แถวของปุ่ม, แถบนำทาง, คอลัมน์การ์ดเดียว Flexbox รับรู้ถึงเนื้อหาและเหมาะมากเมื่อคุณต้องการให้รายการกำหนดขนาดตัวเอง

ใช้ CSS Grid สำหรับเลย์เอาต์สองมิติที่คุณต้องการควบคุมทั้งแถวและคอลัมน์พร้อมกัน — เลย์เอาต์หน้าเต็ม, แกลเลอรีรูปภาพ, แดชบอร์ด Grid รับรู้ถึงเลย์เอาต์และให้คุณวางรายการลงในแทร็กที่กำหนดไว้

ทั้งสองอย่างทำงานเสริมกัน ไม่ได้แข่งขันกัน การออกแบบจริงหลายอย่างรวมทั้งสองอย่างเข้าด้วยกัน: เลย์เอาต์หน้าแบบ Grid พร้อมแถบนำทาง Flexbox และแถวการ์ดภายใน

เคล็ดลับในการเชี่ยวชาญ Flexbox

• จินตนาการแกนต่างๆ รู้เสมอว่าทิศทางไหนคือ "หลัก (main)" และทิศทางไหนคือ "รอง (cross)" — ป้ายกำกับแกนของพื้นที่ทดลองทำให้สิ่งนี้ชัดเจน
• ใช้ gap แทน margins เบราว์เซอร์สมัยใหม่รองรับ gap บนคอนเทนเนอร์ flex อย่างสมบูรณ์แล้ว และช่วยกำจัดความจำเป็นในการใช้ทริค margin ที่ยุ่งยากสำหรับรายการสุดท้าย
• เลือกใช้ flex: 1 เมื่อคุณต้องการให้รายการแบ่งปันพื้นที่เท่ากัน ตัวย่อนี้เกือบจะเป็นสิ่งที่คุณต้องการเสมอ
• min-width: 0 บนรายการ flex รายการมีขนาดความกว้างขั้นต่ำโดยนัยตามเนื้อหา หากสตริงยาวๆ ที่ตัดคำไม่ได้ (เช่น URL) ทำให้เลย์เอาต์ของคุณล้น ให้ตั้งค่า min-width: 0 บนรายการเพื่อเขียนทับสิ่งนี้
• หลีกเลี่ยงความกว้างแบบเปอร์เซ็นต์เพียงอย่างเดียว การผสมผสานความกว้างแบบเปอร์เซ็นต์กับ flex-grow อาจให้ผลลัพธ์ที่น่าประหลาดใจ แนะนำให้ใช้ flex-basis พร้อมค่าเริ่มต้นที่เหมาะสม

การรองรับเบราว์เซอร์และความเข้ากันได้

CSS Flexbox รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว รวมถึง Chrome, Firefox, Safari, Edge และเบราว์เซอร์มือถือหลักทั้งหมด คุณสมบัติ gap ในคอนเทนเนอร์ flex ได้รับการรองรับจากเบราว์เซอร์ทั่วไปในปี 2021 สำหรับเบราว์เซอร์รุ่นเก่า (IE10/11) จำเป็นต้องมี vendor prefixes และมีบั๊กที่บันทึกไว้หลายจุด สำหรับกลุ่มผู้ชมเหล่านั้น ให้พิจารณา flexbugs

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

ทำไมรายการ flex ของฉันถึงล้นคอนเทนเนอร์?

รายการ flex มี min-width: auto โดยนัยตามเนื้อหา คำที่ยาว, บล็อกโค้ด หรือข้อความที่จัดรูปแบบไว้ก่อนหน้าสามารถบังคับให้รายการกว้างกว่าคอนเทนเนอร์ได้ แก้ไขโดยตั้งค่า min-width: 0 บนรายการ (หรือ min-height: 0 สำหรับเลย์เอาต์คอลัมน์)

space-between, space-around และ space-evenly ต่างกันอย่างไร?

space-between จะไม่เว้นที่ว่างที่ปลายทั้งสองข้างและมีระยะห่างระหว่างรายการเท่ากัน space-around จะเว้นช่องว่างครึ่งหนึ่งที่ปลายแต่ละด้านและช่องว่างเต็มระหว่างรายการ space-evenly จะเว้นที่ว่างเท่ากันทั้งที่ปลายและระหว่างรายการ ลองเปลี่ยนค่าในพื้นที่ทดลองเพื่อสัมผัสความแตกต่าง

ฉันสามารถทำแอนิเมชันคุณสมบัติ flex ได้หรือไม่?

ได้ flex-grow, flex-shrink, flex-basis, order และ gap สามารถทำ transition ได้ ส่วนการทำแอนิเมชัน flex-direction, justify-content และ align-items ไม่ได้รับการรองรับเนื่องจากเป็นคุณสมบัติที่กำหนดเป็นค่าเฉพาะตัว

พื้นที่ทดลองนี้ทำงานแบบออฟไลน์ได้หรือไม่?

การคำนวณ Flexbox ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ CSS ดั้งเดิม เมื่อโหลดหน้าเว็บแล้ว คุณสามารถใช้พื้นที่ทดลองได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต — ไม่มีการเรียก API หรือการคำนวณฝั่งเซิร์ฟเวอร์

โค้ดที่สร้างขึ้นพร้อมใช้งานจริงหรือไม่?

ใช่ CSS ที่ส่งออกใช้คุณสมบัติมาตรฐานที่รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว HTML ใช้ชื่อคลาสที่มีความหมาย (flex-container, flex-item) ซึ่งคุณสามารถเปลี่ยนชื่อเพื่อให้เข้ากับรูปแบบของโปรเจกต์ของคุณได้

แหล่งข้อมูลเพิ่มเติม

• CSS Flexible Box Layout - MDN
• CSS Flexible Box Layout Module Level 1 - W3C Specification
• CSS Flex Box Layout - Wikipedia

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

เครื่องมือสำหรับเว็บมาสเตอร์:

• เครื่องคิดเลข CPC
• เครื่องคำนวณ CPM
• CSS Compressor
• เครื่องสร้างฟาวิคอน
• เครื่องคำนวณ Google AdSense
• เครื่องสร้าง cron job
• เครื่องสร้างนิพจน์ crontab
• คอมเพรสเซอร์ HTML
• ตัวแปลง HTML เป็นข้อความ แนะนำ
• เครื่องตรวจสอบความหนาแน่นของคำหลัก
• เครื่องสร้างตาราง Markdown
• เครื่องสร้างเมตาแท็ก
• เครื่องลบเครื่องหมายคำพูดอัจฉริยะ
• ตัวสร้าง URL Slug
• เครื่องคำนวณค่าหน้า
• เครื่องคำนวณมูลค่าผู้เข้าชม
• ตัวคำนวณสิทธิ์ Unix (chmod)
• ตัวเข้ารหัส/ถอดรหัส HTML Entity
• ตัวสร้าง Lorem Ipsum
• Escape Unescape สตริง JSON
• เครื่องแปลง cURL เป็น JSON
• ตัวจัดรูปแบบ SQL
• เครื่องมือปรับแต่ง SVG
• เครื่องมือสร้างรหัสการเปลี่ยนเส้นทาง .htaccess
• ตัวตรวจสอบขนาดการรวบรวมข้อมูล Googlebot
• เครื่องมือสร้าง robots.txt ใหม่
• เครื่องมือสร้าง XML Sitemap ใหม่
• เครื่องตรวจสอบอายุโดเมน ใหม่
• ตัวตรวจสอบ Open Graph ใหม่
• ค้นหา WHOIS ใหม่
• ตรวจสอบ DNS ใหม่
• ตัวตรวจสอบความเร็วหน้าเว็บ ใหม่
• ตรวจสอบความน่าเชื่อถือโดเมน ใหม่
• ตรวจสอบการเปลี่ยนเส้นทาง ใหม่
• เครื่องสร้างแท็ก Hreflang ใหม่
• เครื่องมือตรวจสอบลิงก์เสีย ใหม่
• พื้นที่ทดลอง CSS Flexbox ใหม่
• เครื่องมือสร้าง CSS Grid ใหม่
• เครื่องมือสร้างคำสั่ง Git ใหม่
• เครื่องสร้างไฟล์ .env ใหม่