Flexbox คืออะไร มาดูกัน!!

Flex Layout จะมีส่วนประกอบด้วย 2 ส่วน ก็คือ

1. Flex Container เป็น Layout mode เพื่อกำหนด display: flex เอาไว้
2. Flex Item คือ elements ที่อยู่ภายใน Flex Container

Flex Layout

Flex-wrap

เป็นการกำหนดว่าจะให้ Flex Item ภายใน Flex Container ซึ่งจะประกอบไปด้วย nowrap, wrap และ wrap-reverse

Flex-wrap

• nowrap (default) คือ ทุกๆ flex item ที่อยู่ใน flex container จะเรียงอยู่ในแถวเดียวกัน และ flex item จะมีขนาดที่พอดีกับขนาดของ flex container ถ้า flex container เล็กกว่าขนาดของ flex item จะทำให้ flex item ล้นออกไปทางด้านขวา
• wrap คือ flex item ที่อยู่ใน flex container จะดันลงมาด้านล่างตามขนาดของ flex container โดยจะเรียงจากบนลงล่าง
• wrap-reverse คือ flex item ที่อยู่ใน flex container จะดันลงมาด้านล่างตามขนาดของ flex container โดยจะเรียงจากล่างขึ้นบน

Justify-content

เป็นการกำหนดการจัดตำแหน่งของ Flex Item ภายใน Flex Container ประกอบไปด้วย flex-start, flex-end, center, space-between และ space-around

Justify-content

• flex-start คือ จัด Flex Item ให้ชิดซ้าย ของ flex container
• flex-end คือ จัด Flex Item ให้ชิดขวา ของ flex container
• center คือ จัด Flex Item ให้อยู่ตรงกลาง ของ flex container
• space-between คือ จัด Flex Item ให้มีระยะห่างเท่าๆกัน และ flex item ตัวแรก ชัดด้านซ้าย ส่วน flex item ตัวสุดท้ายจะชิดด้านขวา
• space-around คือ จัด Flex Item ให้มีช่องว่างด้านข้างทั้งฝั่งซ้ายและฝั่งขวาของแต่ละ flex item จะมีขนาดเท่าๆกัน ซึ่งจะเห็นได้ว่าช่องว่างหลัง flex item ตัวที่ 1 จะมีขนาดใหญ่กว่าช่องว่างข้างหน้าสุด เพราะว่าเป็นช่องว่างของ flex item ตัวที่ 1 และ flex item ตัวที่ 2
• space-event คือ จัด flex Item เพื่อให้ระยะห่างเท่าๆกัน และช่องว่างถึงขอบ เท่ากัน

Align-Items

เป็นการกำหนดการจัดตำแหน่งของ Flex Item ในแนวตั้ง ภายใน Flex Container ซึ่งประกอบไปด้วย flex-start, center, flex-end, stretch และ baseline

Align-Items

• stretch (default) คือ Flex Item จะมีขนาดความยาว เท่ากับความสูงของ Flex Container และ ระยะขอบชิดขอบของ Flex Container มากที่สุด
• flex-start คือ การจัด Flex Item ให้อยู่บนสุดใน Flex Container
• center คือ การจัด Flex Item ให้อยู่ตรงกลางใน Flex Container
• flex-end คือ การจัด Flex Item ให้อยู่ล่างสุดใน Flex Container
• baseline คือ flex item ที่อยู่ใน flex container จะเรียงกันโดยอิงจากตำแหน่งฐาน

Flex-Direction

เป็นการกำหนดทิศทางของ flex item ที่อยู่ภายใน flex container ซึ่งประกอบด้วย row, row-reverse, column และ column-reverse

Flex-Direction

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

ลองเอาไปใช้กันดูนะ 😊😊😊