สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
## Flexbox ใน CSS - การใช้ `align-self` ในการจัดการ Flex Items แต่ละตัว
CSS Flexbox (Flexible Box) เป็นเครื่องมือที่ยอดเยี่ยมในการจัดการกับ layout ของเว็บเพจอย่างมีประสิทธิภาพ โดย Flexbox นั้นมีความยืดหยุ่นสูงในการจัดเรียงและจัดการองค์ประกอบต่าง ๆ (Flex Items) ภายใน container (Flex Container) ซึ่งความยืดหยุ่นนี้เป็นสิ่งที่นักพัฒนาเว็บไซต์สมัยใหม่ยกให้เป็นหนึ่งในส่วนที่มีประโยชน์มากที่สุดของ CSS
Flexbox อนุญาตให้คุณจัดเรียงองค์ประกอบต่าง ๆ ในแม่แบบ (layout) ที่หลากหลายทั้งแบบแถว (row) หรือแบบคอลัมน์ (column) โดย Flex Container จะทำการกระจายพื้นที่ในแนวแกน (axis) โดยอัตโนมัติเพื่อให้องค์ประกอบต่าง ๆ อยู่ในตำแหน่งที่เหมาะสม
Flexbox มีสองแกนหลักคือ:
- Main Axis: แกนหลักสามารถเป็นแนวนอนหรือแนวตั้งขึ้นอยู่กับค่า `flex-direction` - Cross Axis: เป็นแกนที่ตั้งฉากกับ Main Axis
หนึ่งในคุณสมบัติที่สำคัญของ Flexbox คือการควบคุมการจัดตำแหน่งของ Flex Items แต่ละตัวให้มีความแตกต่างจากกันได้ แม้จะอยู่ใน Flex Container เดียวกัน ซึ่งการใช้ `align-self` ทำให้สามารถควบคุมการจัดตำแหน่งของแต่ละ item ได้
`align-self` คืออะไร?
`align-self` เป็นคุณสมบัติใน CSS ที่ช่วยให้คุณกำหนดการจัดตำแหน่งของ Flex Items แต่ละตัวบน Cross Axis ได้ตามความต้องการของแต่ละ items โดยไม่จำเป็นต้องเปลี่ยนค่าของ Flex Container
ค่าที่สามารถใช้กับ `align-self` ประกอบไปด้วย:
- auto: ใช้ค่าเดียวกับ `align-items` ของ Flex Container - flex-start: ติดกับจุดเริ่มต้นของ Cross Axis - flex-end: ติดกับจุดสิ้นสุดของ Cross Axis - center: จัดกึ่งกลางตาม Cross Axis - baseline: จัดตามแนวฐานของ Text - stretch: ยืดขยาย item ให้เต็มพื้นที่ตัวอย่างการใช้งาน `align-self`
ด้านล่างนี้คือตัวอย่างการใช้ `align-self` ในการปรับตำแหน่งของ Flex Items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>การใช้งาน align-self ใน Flexbox</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f9f9f9;
border: 1px solid #ccc;
}
.flex-item {
background-color: #61dafb;
padding: 10px;
margin: 5px;
width: 100px;
}
.align-self-start {
align-self: flex-start;
}
.align-self-end {
align-self: flex-end;
}
.align-self-center {
align-self: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item align-self-start">Start</div>
<div class="flex-item align-self-center">Center</div>
<div class="flex-item align-self-end">End</div>
</div>
</body>
</html>
การใช้ `align-self` เป็นตัวเลือกที่ทรงพลังในการจัดการตำแหน่งของ Flex Items แต่ละตัวใน Flex Container การศึกษาและการทำความเข้าใจเรื่อง Flexbox จะช่วยพัฒนาเว็บไซต์ที่มี layout สวยงามและตอบสนองได้ดีต่อการใช้งานที่หลากหลาย
การที่เรามีเครื่องมือที่ยืดหยุ่นเช่นนี้ช่วยให้นักพัฒนาเว็บสามารถสร้างเว็บไซต์ที่ตรงกับความต้องการทางธุรกิจและการใช้งานที่หลากหลายอย่างเต็มที่ หากคุณสนใจที่จะเจาะลึกเพิ่มเติมเกี่ยวกับ CSS และ Flexbox ทาง EPT มีหลักสูตรที่ครอบคลุมและอัดแน่นไปด้วยข้อมูลที่จำเป็นสำหรับการเป็นนักพัฒนาเว็บยุคใหม่
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com