HN เปิดตัว: Playground เพื่อแก้ปัญหา CSS Flexbox

 (yoavsbg.github.io)
2 คะแนน โดย GN⁺ 2025-01-06 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • เครื่องมือนี้ช่วยให้คุณทดลองคุณสมบัติ flex ต่างๆ เพื่อทำความเข้าใจผลกระทบต่อเลย์เอาต์ได้

  • สามารถดูการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอกโค้ด CSS ที่ถูกสร้างขึ้นได้

  • flex-direction

    • row: จัดวางองค์ประกอบในแนวนอน
    • column: จัดวางองค์ประกอบในแนวตั้ง
    • row-reverse: จัดวางองค์ประกอบในแนวนอนแบบเรียงย้อนกลับ
    • column-reverse: จัดวางองค์ประกอบในแนวตั้งแบบเรียงย้อนกลับ

  • justify-content

    • flex-start: จัดวางองค์ประกอบให้อยู่ที่จุดเริ่มต้น
    • center: จัดวางองค์ประกอบให้อยู่ตรงกลาง
    • flex-end: จัดวางองค์ประกอบให้อยู่ที่จุดสิ้นสุด
    • space-between: ให้มีระยะห่างเท่ากันระหว่างองค์ประกอบ
    • space-around: ให้มีระยะห่างเท่ากันรอบๆ องค์ประกอบ

  • align-items

    • stretch: ยืดขนาดองค์ประกอบเพื่อจัดตำแหน่ง
    • flex-start: จัดวางองค์ประกอบที่จุดเริ่มต้น
    • center: จัดวางองค์ประกอบไว้กึ่งกลาง
    • flex-end: จัดวางองค์ประกอบที่จุดสิ้นสุด
    • baseline: จัดวางองค์ประกอบตามเส้นฐาน

  • flex-wrap

    • nowrap: วางองค์ประกอบในบรรทัดเดียว
    • wrap: วางองค์ประกอบบนหลายบรรทัด
    • wrap-reverse: วางองค์ประกอบบนหลายบรรทัดในลำดับย้อนกลับ

  • ตัวอย่างโค้ด

    • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

  • ผู้สร้าง

    • ผลิตโดย Yoav Sabag
    • สามารถดูข้อมูลเพิ่มเติมได้ที่ YouTube และ GitHub

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-01-06
ความคิดเห็นจาก Hacker News

  • Flexbox แม้จะค่อนข้างง่ายและเข้าใจได้ แต่ชื่อของคุณสมบัติและค่าถูกตั้งไม่ค่อยสื่อความหมาย

    • ชื่อเช่น justify-content และ align-items ทำให้เกิดความสับสน
    • ต้องทำการลองผิดลองถูกหลายครั้งเพื่อเรียนรู้ Flexbox

  • แนะนำ Flexboxfroggy.com และ cssgridgarden.com

    • เว็บไซต์เหล่านี้มีประโยชน์ในการเรียนรู้ Flexbox และ CSS Grid

  • แนะนำคู่มือของ Josh

    • อธิบายเทคนิคและเคล็ดลับขั้นสูงของ Flexbox อย่างละเอียด
    • กล่าวถึงแนวคิดอย่างเช่น flex-basis, auto margins, min-width

  • แชร์ประสบการณ์การสร้างคู่มือแบบโต้ตอบที่คล้ายกัน

    • ช่วยให้จำได้ดีขึ้น

  • เสนอว่า main-axis-arrangement และ cross-axis-alignment เข้าใจง่ายกว่า justify-content และ align-items

  • ระแดกความยากของการใช้ Flexbox อย่างถูกวิธี

    • ระบุว่า Flexboxfroggy.com ก็ไม่ช่วยมากนัก

  • ต้องการแบบฝึกหัดที่น่าสนใจสำหรับการฝึกการจัดเลย์เอาต์ด้วย CSS

    • ChatGPT ช่วยในการดีบัก CSS ได้ แต่ยังต้องมีความเข้าใจ CSS อย่างลึกซึ้ง

  • คิดว่ารูปแบบไวยากรณ์ของ Flexbox และ Grid ค่อนข้างเป็นเชิงคำอธิบาย

    • หากเข้าใจ box model และใช้ Firefox Dev Tools จะช่วยได้มาก
    • Flexboxfroggy และ cssgridgarden มีประโยชน์สำหรับการฝึกฝน
    • มักจะอ้างอิง cheat sheet ของ CSS-tricks อยู่เสมอ

  • กล่าวถึงความสำคัญของคุณสมบัติของลูก Flexbox

    • มุ่งเน้นแค่คุณสมบัติของคอนเทนเนอร์ 4 อย่างนั้นค่อนข้างจำกัด

  • ทำ cheat sheet สำหรับอ้างอิงคุณสมบัติ Flexbox

    • อาจมีประโยชน์ต่อผู้อื่นเช่นกัน