Chapter 1-7. Flex 핵심정리 - 개별 아이템 속성

인프런에 있는 1%코딩님의 강의 CSS Flex와 Grid 제대로 익히기 를 듣고 정리한 필기입니다. 😀

수직축으로 아이템 - align-self

• align은 수직축 정렬이죠. align-items의 아이템버전입니다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬입니다. 기본값은 auto로, 기본적으로 align-items설정을 상속 받습니다. align-self는 lign-item보다 우선순위가 높습니다. 전체 설정보다 각각의 개별 설정이 우선한다는 의미입니다. auto외의 나머지 값들은 align-items와 동일합니다.

.item {
  align-self: auto;
  align-self: stretch;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;  
  align-self: baseline;  
}

아이템 배치 순서 - order

• order는 각 아이템들의 시각적 나열 순서를 결정하는 속성입니다. 숫자값이 들어가며, 작은 숫자일수록 먼저 배치됩니다. 다만 “시각적” 순서 일뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의하셔야합니다.

.item:nth-child(1){
  order: 3;
}
.item:nth-child(1){
  order: 1;
}
.item:nth-child(1){
  order: 2;
}

z-index

• z-index는 Z축 정렬을 할 수 있습니다. 숫자가 클 수록 위로 올라옵니다. 기본값은 0입니다.

  position에서 z-index랑 동일하다고 생각하시면 됩니다.

.item:nth-child(2) {
  z-index: 1;
  transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Css 카테고리 내 다른 글 보러가기