CSS flex 잘 이용하는 방법

css Dislpay 관련 설정

display : flex 를 잘 사용해보자

justify-content

• space-between: 요소들 사이에 동일한 간격을 둡니다.
• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

Tip : Flex의 방향이 column일 경우 justify-content 의 방향이 세로로, align-items 의 뱡향이 가로로 바뀝니다.

order

때때로 컨테이너의 row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않습니다. 이러한 경우에는 order  속성을 각 요소에 적용할 수 있습니다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.

align-self

align-self 는 개별 요소에 적용할 수 있는 또 다른 속성

flex-wrap

• nowrap: 모든 요소들을 한 줄에 정렬합니다. (flex-wrap 속성이 없으면 이 속성으로 적용)
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex flow

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

#pond {
  display: flex;
  flex-flow: column wrap;
}

위의 둘의 코드는 같다.

align-content

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

Tip 이 속성을 사용하는 방법이 어려울 수 있습니다. align-content 는 여러 줄들 사이의 간격을 지정하며, align-items 는 컨테이너 안f에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content 는 효과를 보이지 않습니다.