flex
수평 수직 스타일 구성에 유리한 기능
Container 속성과 Container의 내부 items 속성으로 구성
Container 속성
display Flex Container를 정의
flex-flow flex-direction와 flex-wrap의 단축 속성
flex-direction Flex Items의 주 축(main-axis)을 설정
flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정
justify-content 주 축(main-axis)의 정렬 방법을 설정
align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)
display
flex Container를 Block 특성으로 만든다.
inline-flex Container를 inline 특성으로 만든다.
flex-flow
flex-direction Items의 주 축(main-axis)을 설정
속성 : row, row-reverse, column, column-reverse
flex-wrap Items의 여러 줄 묶음(줄 바꿈) 설정
속성 : wrap, nowrap, wrap-reverse
기본 속성은 nowrap으로 items가 줄바꿈 되지 않는다.
justify-content
flex-start Items를 시작점(flex-start)으로 정렬
flex-end Items를 끝점(flex-end)으로 정렬
center Items를 가운데 정렬
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는
사이에 고르게 정렬됨
space-around Items를 균등한 여백을 포함하여 정렬
align-content flex-wrap속성으로 items가 2줄 이상, 여백이 있을 때만 가능한 옵션
stretch Container의 교차 축 너비를 여백없이 채울만큼 items를 늘림
flex-start Items를 시작점(flex-start)으로 정렬
flex-end Items를 끝점(flex-end)으로 정렬
center Items를 가운데 정렬
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에
고르게 정렬됨
space-around Items를 균등한 여백을 포함하여 정렬
align-items items가 2줄 이상일 경우 align-items 속성이 우선이므로 align-content 속성을
기본 값으로 두고 사용해야 한다.
stretch Container의 교차 축을 채우기 위해 Items를 늘림
flex-start Items를 각 줄의 시작점(flex-start)으로 정렬
flex-end Items를 각 줄의 끝점(flex-end)으로 정렬
center Items를 가운데 정렬
baseline Items를 문자 기준선에 정렬Items 속성
order Flex Item의 순서를 설정
flex flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow Flex Item의 증가 너비 비율을 설정
flex-shrink Flex Item의 감소 너비 비율을 설정
flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정
align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정
order : 숫자
item의 order 숫자가 작을수록 앞에 배치, html 구조에 상관없음. 음수도 가능
flex default
flex-grow Item의 증가 너비 비율을 설정 0
flex-shrink Item의 감소 너비 비율을 설정 1
flex-basis Item의 (공간 배분 전) 기본 너비 설정 auto
.item {
flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 1; /* 증가너비 감소너비 */
flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}
flex-basis의 기본값은 auto이지만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용
다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다
align-self 교차축에서 개별 item의 정렬 방법 align items보다 우선한다.
auto Container의 align-items 속성을 상속받음 auto
stretch Container의 교차 축을 채우기 위해 Item을 늘림
flex-start Item을 각 줄의 시작점(flex-start)으로 정렬
flex-end Item을 각 줄의 끝점(flex-end)으로 정렬
center Item을 가운데 정렬
baseline Item을 문자 기준선에 정렬