position과 display:flex

💻 position

요소의 위치를 지정하기 위한 기준을 설정한다.

• position: static : 기본 값으로 값이 없다고 생각해도 무방하다.
• position: relative : 해당 요소를 기준으로 설정한다.
• position: absolute : 위치 상 부모 요소를 기준으로 설정한다. 부모 요소에 기준이 없을 경우, Viewport(브라우저)를 기준으로 설정한다.
• position: fixed : Viewport(브라우저)를 기준으로 설정한다.
• position: sticky : 스크롤 영역을 기준으로 설정한다.

👉 같이 사용하는 속성

• top , bottom , right , left : 기준 점으로 부터 위, 아래, 오른쪽, 왼쪽으로 얼마나 거리를 둘 건지 설정한다. px, em, rem단위 등으로 설정한다.
• z-index : 요소의 쌓임 순서를 설정한다. 숫자로 값을 설정한다.

✔ 요소의 쌓임 순서를 결정하는 방법

1. 비교 대상 요소들의 position 속성에 값이 있는지 확인한다. 값이 있는 요소가 위에 배치된다.
2. 비교 대상 요소들의 position 속성에 값이 모두 있을경우, z-index 속성의 값이 클 수록 위에 배치된다.
3. z-index 속성이 값이 모두 같을 경우, HTML문서에서 마지막에 작성된 요소가 위에 배치된다.

💻 display: flex

블록 요소를 1차원으로 정렬시킨다. 부모요소에 설정하여 부모요소를 flex container로 만들고, 자식요소를 flex items로 만든다.

👉 같이 사용하는 속성

• flex-direction : flex items를 정렬 할 축을 설정한다.
  • flex-direction: row : flex items를 수평(x축)으로 정렬한다.
  • flex-direction: row-reverse : flex items를 반대 방향으로 수평정렬한다.
  • flex-direction: column : flex items를 수직(y축)으로 정렬한다.
  • flex-direction: column-reverse : flex items를 반대 방향으로 수직 정렬한다.
• flex-wrap : flex items를 묶을 지에 대한 여부를 설정한다.
  • flex-wrap: nowrap : flex items를 묶지 않는다. flex container를 넘어가게 한다.
  • flex-wrap: wrap : flex items를 묶어 flex container를 넘어가지 못하게 한다. flex container의 너비가 부족할 경우, flex items를 다음 줄로 이동시킨다. flex container의 width가 줄어들 수 있다.
• justify-content : flex items를 주축을 기준으로 어떻게 정렬할 지에 대한 방식을 설정한다.
  • justify-content: flex-start : flex items를 시작점부터 차례로 정렬한다.
  • justify-content: flex-end : flex items를 끝점부터 차례로 정렬한다.
  • justify-content: center : flex items를 가운데로 정렬한다.
  • justify-content: space-between : flex items를 시작점과 끝점에 붙인 후, 각 flex items 사이를 균등히 정렬한다.
  • justify-content: space-around : 각 flex items의 외부 여백을 균등히 정렬한다.
• align-content : 여러줄의 flex items를 교차 축을 기준으로 정렬하는 방법을 설정한다. 아이템들이 flex-wrap: wrap 으로 줄바꿈 되있어야하고, 컨테이너에 공간이 있어야 동작한다.
  • align-content: stretch : 기본 값으로 여러 줄의 flex items를 교차 축을 기준으로 시작점부터 정렬한다. flex fontainer의 여백을 채운다.
  • align-content: flex-start : 여러 줄의 flex items를 교차 축을 기준으로 시작점부터 정렬한다. flex container의 여백을 채우지 않는다.
  • align-content: flex-end : 여러 줄의 flex items를 교차 축을 기준으로 끝점부터 정렬한다. flex container의 여백을 채우지 않는다.
  • align-content: center : 여러 줄의 flex items를 교차 축을 기준으로 중앙 정렬한다.
  • align-content: space-between : 여러 줄의 flex items를 교차 축을 기준으로 시작점과 끝점에 붙인 후, 각 flex items 사이를 균등히 정렬한다.
  • align-content: space-around : 여러 줄의 flex items의 외부 여백을 교차 축을 기준으로 균등히 정렬한다.
• align-items : 한 줄의 flex items를 교차 축을 기준으로 정렬하는 방법을 설정한다. justify-content 를 같이 활용하여, flex items를 양 축 가운데로 정렬할 수 있다.
  • align-items: stretch : 기본 값으로 한 줄의 flex items를 교차 축을 기준으로 시작점부터 정렬한다. flex container의 여백을 채운다.
  • align-items: flex-start : 한 줄의 flex items를 교차 축을 기준으로 시작점부터 정렬한다. flex container의 여백을 채우지 않는다.
  • align-items: flex-end : 한 줄의 flex items를 교차 축을 기준으로 끝점부터 정렬한다. flex container의 여백을 채우지 않는다.
  • align-items: center : 한 줄의 flex items를 교차 축을 기준으로 중앙 정렬한다.

👉 flex items에 사용하는 속성

• order : flex items의 정렬 순서를 설정한다.
  • order: 0 : 기본 값으로, 순서가 없다. HTML문서에서 작성 된 순서대로 정렬된다.
  • 숫자로 값을 설정한다. 숫자가 작을 수록 먼저 정렬된다.
• flex-grow : flex container의 남는 공간에 대한 flex items의 증가 너비 비율을 설정한다.
  • flex-grow: 0 : 기본 값으로, 증가 비율이 없다.
  • 숫자로 값을 설정한다. 값을 설정한 flex items들이 남는 공간을 설정한 값의 비율대로 증가한다.
• flex-shrink : flex item의 감소 너비 비율을 설정한다.
  • 기본 값은 1이며, flex container의 너비에 따라 감소 비율을 적용한다.
  • 숫자로 값을 설정한다.
• flex-basis : flex item의 공간 배분 전 기본 너비를 설정한다.
  • flex-basis: auto : 기본 값이다.
  • px, em, rem단위 등으로 값을 설정한다.