มารู้จักและลองใช้งาน CSS Flexbox กันดีกว่า

มารู้จักและลองใช้งาน CSS Flexbox กันดีกว่า
04/02/19   |   11.1k   |  

ด้วยการจัด UI ที่มีความซับซ้อนตามยุคเทรนด์ในตอนนี้ คงต้องเจอการจัด Layout ที่ซับซ้อน และหลากหลาย เพื่อช่วยให้การเขียนโค้ดของเราทำได้ง่าย CSS3 จึงได้เพิ่ม Layout mode แบบใหม่ที่เรียกว่า “Flex Layout” โดยช่วยให้การจัดกล่องต่างๆ ในหน้าเว็บของเรามีความยืดหยุ่นมากยิ่งขึ้นด้วยการใช้งาน Flexbox

ทำความรู้จักกับ Flex Container และ Flex Item กันก่อน..

สำหรับ Flex Layout จะมีส่วนประกอบด้วย 2 ส่วน ก็คือ Flex Container เป็น Layout mode เพื่อกำหนด display: flex เอาไว้ และ Flex Item คือ elements ที่อยู่ภายใน Flex Container ดังตัวอย่างรูปภาพประมาณนี้

มารู้จักกับ Property ต่างๆ ของ Flex Container กัน

flex-direction:

เอาไว้สำหรับกำหนดการจัดเรียง Flex Item ภายใน Flex Container 

  • row: เรียงเป็นแถวแนวนอน จากขวาไปซ้าย
  • row-reverse: เรียงเป็นแถวแนวนอน จากซ้ายไปขวา
  • column: เรียงเป็นแถวแนวตั้ง จากบนลงล่าง
  • column-reverse: เรียงเป็นแถวแนวตั้ง จากล่างขึ้นบน

 

flex-wrap:

เป็นการกำหนดว่าจะให้ Flex Item ภายใน Flex Container

  • nowrap: คือการไม่ให้ Flex Item มีการดันลงมาด้านล่าง และจะมีการลดขนาด Flex Item ให้มีขนาดพอดีกับ Flex Container หาก Flex Container เล็กว่า Flex Item ทั้งหมด ก็จะทำให้ล้นออกไปทางด้านขวา
  • wrap: การกำหนดให้ Flex Item มีการดันลงมาด้านล่างตามขนาดของ Flex Container โดยมีการจัดเรียง Flex Item จากบนลงล่าง
  • wrap-reverse: การกำหนดให้ Flex Item มีการดันลงมาด้านล่างตามขนาดของ Flex Container โดยมีการจัดเรียง Flex Item จากล่างขึ้นบน

 

justify-content:

เป็นการกำหนดการจัดตำแหน่งของ Flex Item ภายใน Flex Container

  • flex-start: จัด Flex Item ให้ชิดซ้าย
  • flex-end: จัด Flex Item ให้ชิดขวา
  • center: จัด Flex Item ให้อยู่ตรงกลาง
  • space-between: จัด Flex Item ให้อยู่ระหว่างกัน
  • space-around: จัด Flex Item ให้มีช่องว่างระหว่าง ด้านหน้า ตรงกลาง ด้านหลัง ให้เท่ากัน

 

align-items:

เป็นการกำหนดการจัดตำแหน่งของ Flex Item ในแนวตั้ง ภายใน Flex Container

  • flex-start: จัด Flex Item ให้อยู่บนสุดใน Flex Container
  • center: จัด Flex Item ให้อยู่ตรงกลางใน Flex Container
  • flex-end: จัด Flex Item ให้อยู่ล่างสุดใน Flex Container


 


สำหรับเรื่อง CSS Flexbox จากการเรียนรู้ในครั้งนี้ที่ตัวเองเข้าใจ ก็มีประมาณนี้ครับ เพื่อน ๆ สามารถนำความรู้ไปประยุกต์ใช้กับงานของตัวเองได้ไม่มากก็น้อยแน่นอน เพราะแน่นอนว่ามันดีกว่าการจัด display ที่ค่อนข้างมีปัญหาแน่นอน
 

tags : flexbox css



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email