display: flex 속성

▶ flex 방식

display:

    flex - 자신은 블록속성을 유지하면서 자식요소에 flex 환경 설정

    inlinne-flex - 자신을 인라인 속성으로 변경하면서 자식요소에 flex 환경 설정

flex-direction:

    row - flex의 기본축을 가로로 지정

    column - flex의 기본축을 세로로 지정

    row-reverse - 자식요소의 콘텐츠를 가로 역순으로 정렬

    column-reverse - 자식요소의 콘텐츠를 세로 역순으로 정렬

flex-wrap:

    nowrap - 자식 요소의 가로사이즈가 줄어들고 줄바꿈을 하지 않음

    wrap - 자식 요소의 가로사이즈를 유지하며 줄바꿈을 함 (반응형제작시 필수)

flex-flow:

    flex-direction과 flex-wrap 속성의 축약문 (flex-flow: row wrap;)

 

▶ 자식요소 정렬하는 방법

justify-content - 기본축으로 정렬하기

align-items - 반대축으로 정렬하기 (자식요소가 1개이거나 줄바꿈이 필요없을 때)

align-content - 반대축으로 정렬하기 (자식요소가 여러개일 때, 줄바꿈이 필요할 때)

    flex-start : 자식요소를 기본축이 시작하는 방향으로 정렬하기

    flex-end : 자식요소를 기본축이 끝나는 방향으로 정렬하기

    center: 자식요소를 가운데 방향으로 정렬하기

    space-between: 자식요소의 좌우 사이간격을 균일하게 배치하기 (부모요소의 양끝에 배치한 상태로 간격 배치)

    space-around: 자식요소의 기본 축 방향으로 주위 간격을 균일하게 배치 (부모요소의 양끝에 사이간격의 절반 여백)

    space-evenly: 자식요소를 균일하게 배치하고 양끝의 간격만큼 여백을 적용 (양끝에도 사이간격과 동일한 여백)

 

▶ 자식요소 순서지정

order: ;

기본 속성값은 0, 같은숫자일경우 html 작성순서를 따른다. 숫자가 클수록 뒤에 배치됨. 음수가능

 

▶ 요소의 여백 비율 확대/축소 조절

flex-grow - 요소의 여백 비율 확대하기 속성, 요소의 크기를 키웠을 때 요소 안쪽의 여백이 확대되는 비율을 지정 (숫자가 클수록 여백이 큼)

flex-shrink - 요소의 여백 비율 축소하기 속성, 요소의 크기를 줄였을 때 요소 안쪽의 여백이 축소되는 비율을 지정 (숫자가 클수록 여백이 작음)

flex-basis - 요소의 기본크기 설정

flex - flex-grow, flex-shrink, flex-basis의 축약형 / flex-shrink을 안쓸경우 기본값은 1, flex-basis의 기본값은 auto