Quest Academy

CSS Flexbox

Introduction to the CSS Flexbox Challenges

อินเทอร์เฟซผู้ใช้ของเว็บไซต์ (“UI”) มีสององค์ประกอบ ขั้นแรกมีองค์ประกอบภาพเช่นสีแบบอักษรและรูปภาพ ขั้นที่สอง มีการจัดวางตำแหน่งขององค์ประกอบเหล่านั้น ในการออกแบบเว็บที่ตอบสนองรูปแบบ UI ต้องรองรับ Browser และอุปกรณ์ต่าง ๆ ที่เข้าถึงเนื้อหา

CSS3 นำเสนอ Flexible Boxes หรือ flexbox เพื่อสร้างเค้าโครงหน้าสำหรับ UI แบบไดนามิก เป็นโหมดเค้าโครงสร้างที่จัดเรียงองค์ประกอบในลักษณะที่คาดเดาได้สำหรับขนาดหน้าจอและ Browser ที่แตกต่างกัน ในขณะที่ค่อนข้างใหม่ Browser สมัยใหม่ยอดนิยมทั้งหมดรองรับ flexbox ส่วนี้ครอบคลุมถึงวิธีใช้ flexbox และตัวเลือกเค้าโครงต่างๆที่มีให้

CSS Flexbox

Use display: flex to Position Two Boxes

Add Flex Superpowers to the Tweet Embed

Use the flex-direction Property to Make a Row

Apply the flex-direction Property to Create Rows in the Tweet Embed

Use the flex-direction Property to Make a Column

Apply the flex-direction Property to Create a Column in the Tweet Embed

Align Elements Using the justify-content Property

Use the justify-content Property in the Tweet Embed

Align Elements Using the align-items Property

Use the align-items Property in the Tweet Embed

Use the flex-wrap Property to Wrap a Row or Column

Use the flex-shrink Property to Shrink Items

Use the flex-grow Property to Expand Items

Use the flex-basis Property to Set the Initial Size of an Item

Use the flex Shorthand Property

Use the order Property to Rearrange Items

Use the align-self Property

Be the first to add a review.

Please, login to leave a review
Add to Wishlist

Archive