TIL #15 CSS flex 성질과 함께 사용하는 코드 정리

display:flex와 함께 사용하는 css 코드 정리

Justify-content

1. flex-start : 요소들을 컨테이너 왼쪽으로 정렬
2. flex-end : 요소들을 컨테이너 오른쪽으로 정렬
3. center : 요소들을 컨테이너 가운데로 정렬
4. space-between : 요소들 사이에 동일한 간격을 준다.
5. space-around : 요소들 주위에 동일한 간격을 준다.

align-items

1. flex-start : 요소들을 컨테이너 꼭대기로 정렬
2. flex-end : 요소들을 컨테이너 바닥으로 정렬
3. center : 요소들을 컨테이너 세로선 상 가운데로 정렬
4. baseline : 요소들을 컨테이너 시작 위치로 정렬
5. stretch : 요소들을 컨테이너에 맞도록 늘린다.

flex-direction

1. row : 요소들을 텍스트 방향과 동일하게 정렬
2. row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
3. column : 요소들을 세로로 정렬
4. column-reverse : 요소들을 아래에서 위로 정렬
   (row-reverse, column-reverse 를 사용하면 justify-content의 flex-start, flex-end 도 반대가 된다.)
   (flex 방향이 column 일 경우 justify-content의 flex-start, flex-end 도 세로로 적용된다.)

order

• 부모에 flex 를 준 후 자식의 위치를 이동시키기 위해 사용한다.
• 기본값은 0으로 0보다 높은 수를 입력하면 숫자와 일치하는 자식 요소들의 순서만큼 오른쪽으로 이동하고 0보다 낮은 수를 입력하면 숫자와 일치하는 자식 요소들의 순서만큼 왼쪽으로 이동한다.

align-self

• flex가 적용된 부모 요소 안의 자식 요소들에게 전체가 아닌 개별적으로 align 속성을 줄 수 있다.
• align-items 와 동일한 값을 사용한다.

flex-wrap

1. nowrap : 요소들을 한 줄에 정렬
2. wrap : 요소들을 여러 줄로 정렬
3. wrap-reverse : 요소들을 여러줄에 걸쳐 반대로 정렬

flex-flow

• flex-direction 과 flex-wrap 을 같이 사용한다.
• 두 가지의 속성을 띄어쓰기로 함께 쓴다. ( 예) flex-flow : row wrap;)

align-content

• 요소들이 여러 줄일 때 사용한다. 한줄이라면 효과가 적용되지 않는다.

1. flex-content : 여러 줄을 컨테이너 꼭대기에 정렬
2. flex-end : 여러 줄을 컨테이너 바닥에 정렬
3. center : 여러 줄을 세로선 상의 가운데에 정렬
4. space-between : 여러 줄 사이에 동일한 간격을 준다.
5. space-around : 여러 줄 주위에 동인한 간격을 준다.
6. stretch : 여러 줄을 컨테이너에 맞도록 늘린다.