Web/HTML, CSS
[CSS] child 에게만 주는 속성 (align-self, order)
Nino_
2022. 10. 10. 16:29
자식(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가 제일 끝으로 간다