Container 속성
display: flex;
flex-direction
flex-direction: row;
flex-direction: column;
flex-wrap
flex-wrap: nowrap; (*default)
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-flow
flex-direction + flex-wrap 의 축약형flex-flow: row wrap;
Item 메인축(flex-direction의 방향) 정렬
흔히, justify-content는 가로축 정렬, align-items는 세로축 정렬이라고 착각할 수 있는데 이는 flex-direction이 default값(=row)일 때가 많아 일반화된 것이다. flex-direction: column인 경우에는 수직(세로)축을 정렬하는 속성이 justify-content가 된다. 즉 justify-content는 메인축을 관장하는 속성, align-items는 서브축을 관장하는 속성이라고 이해하면 된다.
justify-content
justify-content: flex-start; (*default) 좌→우
justify-content: flex-end; 우→좌
justify-content: center; 가운데
justify-content: space-between; 사이 간격 일정하게
justify-content: space-around; 아이템 양옆 간격 일정하게
justify-content: space-evenly; 양끝, 사이 간격 일정하게
Item 서브축 정렬
align-items
align-items: stretch; (*default)
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline; text-baseline에 맞춤
Item 속성
flex-grow
item 여백의 비율
flex-grow : 0 (*default)
flex-shrink
flex-shrink: 1 (*default)
flex-basis
flex-basis: auto (*default)
flex
flex-grow + flex-shrink + flex-basis 축약형flex: 0 1 auto (*default)
flex: 1 1 auto많이 씀
표시순서 바꾸기
order
order: index (0, 1, 2…)
시각적 순서만 바뀔뿐 본래 html 순서는 그대로이기 때문에 웹접근성 측면에서 좋은 방법은 아님.
Uploaded by
N2T