[CSS] child 에게만 주는 속성 (align-self, order)

자식(child) 아이템의 위치를 변경할 때는 아래 두 가지 속성을 사용한다. 

 

• align-self : 

  - align-items 와 비슷한 역할 (cross-axis 방향 아이템의 위치 변경)
  - but 특정 child 에게만 속성 적용
  - 예시) nth-child(n) 사용
  - ** 주의! father 에게 height 가 없으면 적용 안됨

 

• order : 

  - child 의 순서를 바꿀 수 있다
  - HTML을 직접 수정해서 순서를 바꾸기 힘들 때 사용

  - 예시)
  - 1, 2, 3 박스가 있을 때 nth-child(2) 의 order: 1;을 하면
  - 박스 1과 3은 순서 0 인데 2는 1이므로 2가 제일 끝으로 간다

 

 

 

 

---

 

TIL 끝!