การจัดตำแหน่งองค์ประกอบแต่ละชิ้นในโมเดล Flex ของ CSS
คุณสมบัติต่อไปที่เราจะศึกษา
ไม่ได้กำหนดให้กับผู้ปกครองขององค์ประกอบ flex อีกต่อไป
แต่กำหนดให้กับองค์ประกอบเอง มาดูคุณสมบัติ
align-self ซึ่งจัดตำแหน่งบล็อกแต่ละชิ้น
ตามแนวแกนขวาง
สมมติว่าเรามีบล็อก flex เรียงเป็นแถว
มาจัดตำแหน่งให้กึ่งกลางตามแนวตั้ง
โดยกำหนด align-items เป็นค่า center
และให้องค์ประกอบที่สองมีคลาสเพิ่มเติม
elem และสำหรับองค์ประกอบนี้ เราจะกำหนดการจัดตำแหน่งอื่น
เช่น ตรึงไว้ที่ขอบด้านบน
สำหรับสิ่งนี้ ให้องค์ประกอบของเราที่มีคลาส elem
ตั้งค่าคุณสมบัติ align-self เป็นค่า
flex-start:
<div class="parent">
<div class="child">1</div>
<div class="child elem">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
.elem {
align-self: flex-start;
}
:
