[CSS] 속성 정리(3) 배치, 플렉스 ★

🌱배치 position

position: 요소 위치 지정

static, relative, absolute, fixed

• static 기준 없음, 기본값
• relative 요소 자신을 기준 --> 부모에 주로 사용
• absolute 위치 상 부모 요소를 기준 --> 위치 상 부모 요소이지 구조 상이 아니라서 부모 포지션에 position:relative가 없으면 뷰포트가 기준이 됨
• fixed 뷰포트 기준
• 요소 위치 이동할 때 top, bottom, left, right: 단위로 지정 가능

.absolute  {
    position: absolute;
    left: 100px;
    top: 5px;
}

요소 쌓임 순서
1. 요소에 position 속성 값이 있는 경우
2. 1번 조건이 같은 경우, z-index 속성 숫자 높은 값이 위로
3. 1, 2 조건까지 같으면, HTML 구조 상 다음 구조일수록 위로 쌓임

⭐ position 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경됨

---

🌱정렬 flex

display: flex 수평 정렬로 바뀜

• flex container: 부모 요소 - display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
• flex items: 자식 요소들 - order, flex, flex-grow, flex-shrink, flex-basis, align-self
• flex를 하려면 우선 container를 만들어야함

• display:flex 부모 요소인 컨테이너에 마크업하는 스타일 속성 display:block과 비슷
• display:inline-flex 부모 요소인 컨테이너에 쓰지만 display:inline-block과 같음
• flex-direction 주 축(main-axis)을 설정 - 행은 수평, 열은 수직
  row: (좌 -> 우) / row-reverse (우 -> 좌) / column(위 -> 아래) / column-reverse(아래 -> 위)

• flex-wrap 묶음(줄 바꿈) 여부
  nowrap: 줄 바꿈 없음 (기본값)
  wrap: 여러 줄로 묶음 -> 요소 크기가 커서 칸이 모자라면 줄 바꿈 처리해서 보여줘

• justify-content 주 축의 정렬 방법 결정 -> 수평 정렬의 방법을 결정
  flex-start: 왼쪽 정렬 (기본값) / flex-end 오른쪽 정렬 / center 가운데 정렬
  

• align-content 교차 축의 여러 줄 정렬 방법 -> 수직 정렬에 대한 개념
  stretch: 높이 지정안하면 늘어남 (기본값)
  flex-start: 전체 contents가 위쪽으로 붙음
  flex-end: contents가 바닥에 붙음 / center: 가운데 정렬
  

• align-items 교차 축의 한 줄 정렬 방법
  stretch: 높이 값이 없으면 늘어남 (기본값)
  flex-start 위로 붙음 / flex-end 아래로 붙음 / center
  

• order flex items의 순서
  0: 순서 없음 / 숫자: 숫자가 작을수록 먼저 ex) order:--1; order:5;

• flex-grow flex item의 증가 너비 비율
  0: 증가 없음 (기본값) / 숫자: 증가 비율 ex) flex-grow: 2;

• flex-shrink flex item의 감소 너비 비율
  1: Flex container 너비에 따라 감소 비율 적용 (기본값)
  숫자: 감소 비율, 0을 입력하면 실제 너비만큼 유지
  

• flex-basis flex item의 공간 배분 전 기본 너비 = 기본 크기 설정
  auto: 요소의 content 너비 (기본값) / 단위: 지정