display : flex 속성은 하나의 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex 속성이 적용된 container가 부모 요소인 flex container 가 되고, 하위 요소인 item은 자식 요소인 flex item 이라고 부릅니다.
✔ flex container 속성
flex-direction, flex-wrap, justify-content, align-items, align-content
✔ flex item 속성
flex, flex-grow, flex-shrink, flex-basis, order
✔ flex-direction
item 요소들의 방향을 결정 하는 속성입니다.
.container { flex-direction: row; }
✔ row (기본값) : 주 축이 글의 작성 방향과 동일합니다.
✔ row-reverse : row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치 합니다.
✔ column : 추 죽이 블록 축과 동일합니다.
✔ column-reverse : column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치 합니다.
✔ flex-wrap
item 요소들이 container의 영역을 넘어갈 경우 줄 바꿈을 할지 결정 하는 속성입니다.
.container { flex-wrap: nowrap; }
✔ nowrap (기본값) : 부모 요소 영역을 벗어나더라도 한 줄에 배치합니다.
✔ wrap : 영역을 벗어나게 되면 여러 행에 걸쳐서 배치됩니다.
✔ wrap-reverse : wrap 속성과 동일하지만 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치 됩니다.
✔ justify-content
item의 메인 축을 정렬 하는 속성입니다.
.container { justify-content: flex-start; }
✔ flex-start (기본값) : 시작 지점을 기준으로 정렬합니다.
✔ flex-end : 메인 축의 마지막 지점을 기준 으로 정렬합니다.
✔ center : 메인 축의 item을 가운데 정렬합니다.
✔ space-between : item들 사이에 동일한 간격 으로 정렬합니다.
✔ space-around : item 둘레에 동일한 간격 으로 정렬합니다.
✔ align-items
item의 수직 축을 정렬 하는 속성입니다.
.container { align-items: stretch; }
✔ stretch (기본값)
✔ flex-start : 수직 축의 시작 지점을 기준 으로 item을 정렬합니다.
✔ flex-end : 수직 축의 마지막 지점 을 기준으로 item을 정렬합니다.
✔ center : 수직 축의 item을 가운데 정렬합니다.
✔ baseline : 글꼴의 기준선인 baseline을 기준 으로 정렬합니다.
✔ flex-shrink
item의 축소 너비 비율을 설정 하는 속성입니다.
속성 값은 양의 정수를 사용합니다.
.item { flex-shrink: 0; }
기본 값은 1 이며, 값이 0일 경우 너비가 축소되지 않고 원래 크기가 유지됩니다.
속성 값이 1 이상이고 container의 전체 너비보다 item 요소의 너비가 클 경우 container요소 내부에서 item의 요소 너비가 축소 됩니다.
display : flex 속성은 하나의 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex 속성이 적용된 container가 부모 요소인 flex container 가 되고, 하위 요소인 item은 자식 요소인 flex item 이라고 부릅니다.
✔ flex container 속성
flex-direction, flex-wrap, justify-content, align-items, align-content
✔ flex item 속성
flex, flex-grow, flex-shrink, flex-basis, order
✔ flex-direction
item 요소들의 방향을 결정 하는 속성입니다.
.container { flex-direction: row; }
✔ row (기본값) : 주 축이 글의 작성 방향과 동일합니다.
✔ row-reverse : row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치 합니다.
✔ column : 추 죽이 블록 축과 동일합니다.
✔ column-reverse : column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치 합니다.
✔ flex-wrap
item 요소들이 container의 영역을 넘어갈 경우 줄 바꿈을 할지 결정 하는 속성입니다.
.container { flex-wrap: nowrap; }
✔ nowrap (기본값) : 부모 요소 영역을 벗어나더라도 한 줄에 배치합니다.
✔ wrap : 영역을 벗어나게 되면 여러 행에 걸쳐서 배치됩니다.
✔ wrap-reverse : wrap 속성과 동일하지만 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치 됩니다.
✔ justify-content
item의 메인 축을 정렬 하는 속성입니다.
.container { justify-content: flex-start; }
✔ flex-start (기본값) : 시작 지점을 기준으로 정렬합니다.
✔ flex-end : 메인 축의 마지막 지점을 기준 으로 정렬합니다.
✔ center : 메인 축의 item을 가운데 정렬합니다.
✔ space-between : item들 사이에 동일한 간격 으로 정렬합니다.
✔ space-around : item 둘레에 동일한 간격 으로 정렬합니다.
✔ align-items
item의 수직 축을 정렬 하는 속성입니다.
.container { align-items: stretch; }
✔ stretch (기본값)
✔ flex-start : 수직 축의 시작 지점을 기준 으로 item을 정렬합니다.
✔ flex-end : 수직 축의 마지막 지점 을 기준으로 item을 정렬합니다.
✔ center : 수직 축의 item을 가운데 정렬합니다.
✔ baseline : 글꼴의 기준선인 baseline을 기준 으로 정렬합니다.
✔ flex-shrink
item의 축소 너비 비율을 설정 하는 속성입니다.
속성 값은 양의 정수를 사용합니다.
.item { flex-shrink: 0; }
기본 값은 1 이며, 값이 0일 경우 너비가 축소되지 않고 원래 크기가 유지됩니다.
속성 값이 1 이상이고 container의 전체 너비보다 item 요소의 너비가 클 경우 container요소 내부에서 item의 요소 너비가 축소 됩니다.
