การจัดตำแหน่งองค์ประกอบแต่ละชิ้นในโมเดล Flex ของ CSS

คุณสมบัติต่อไปที่เราจะศึกษา ไม่ได้กำหนดให้กับผู้ปกครองขององค์ประกอบ flex อีกต่อไป แต่กำหนดให้กับองค์ประกอบเอง มาดูคุณสมบัติ align-self ซึ่งจัดตำแหน่งบล็อกแต่ละชิ้น ตามแนวแกนขวาง

สมมติว่าเรามีบล็อก flex เรียงเป็นแถว มาจัดตำแหน่งให้กึ่งกลางตามแนวตั้ง โดยกำหนด align-items เป็นค่า center และให้องค์ประกอบที่สองมีคลาสเพิ่มเติม elem และสำหรับองค์ประกอบนี้ เราจะกำหนดการจัดตำแหน่งอื่น เช่น ตรึงไว้ที่ขอบด้านบน

สำหรับสิ่งนี้ ให้องค์ประกอบของเราที่มีคลาส elem ตั้งค่าคุณสมบัติ align-self เป็นค่า flex-start:

html<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>

css.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;
}

Результат: