Display Flex

display: flex 

flex-wrap

flex-wrap: nowrap : 줄바꿈 금지(넓이가 줄어들어도 절대 줄바꿈이 이뤄지지 않는다.)
flex-wrap: wrap : 줄바꿈 가능(넓이가 줄어들어들면 유동적으로 줄바꿈이 이뤄진다.)

flex-direction 
flex-direction가 row 이면 중심축이 수평정렬이고 반대축이 수직정렬이다 
flex-direction가 column 이면 중심축이 수직정렬이고 반대축이 수평정렬이다 

flex-direction : row 기본값은 row이다  flex-direction : row 수평정렬 
flex-direction : row-reverse 수평정렬 반대로

flex-direction : column 수직정렬 
flex-direction : column-reverse 수직정렬 반대로

flex-flow:column nowrap : direction과 wrap를 한번에 정의 할 수 있다.

flex를 사용 할 때 이 Container의 수직 수평을 정하고 wraping 을 할 것인지 안할 것인지 정하기 

justify-content

justify-content : 중심축에서 아이탬을 어떻게 배치할 건지 결정 ( 아이템 배치를 도와줌)

justify-content:flex-start : 기본값(왼쪽에서 오른쪽,위에서 아래로)
justify-content:flex-end : 오른쪽에서 왼쪽으로,아래서 위로
justify-content:center : 가운대 정렬

justify-content: space-around : 아이템끼리 공간으줌
justify-content: space-evenly : 아이템끼리 공간으줌(아이템과 아이템 사이와 양쪽 끝 공간을 동일하게 줌)
justify-content: space-between : 양쪽 끝 공간이 없이 아이템들 사이에만 공간을 줌 

 

align-items, align-content, order 

align-items 반대축 아이탬 배치를 도와줌
align-cotent : 반대축 justify-content배치와 같다 

display:flex 안에있는 아이템에 지정함 

order : 아이탬들의 순서를 바꿀 수 있다.

 

flex-grow, shrink, basis

flex-grow : 공간을 꽉 채움
flex-grow : Item의 증가 너비 비율을 설정 기본값:0

flex-shrink : 공간이 줄었을 때 먼저 줄어듬 
flex-shrinkItem의 감소 너비 비율을 설정 기본값:1

flex-basis : 공간을 얼마나 차지해야 하는지 세밀하게 지정
flex-basis : Item의 (공간 배분 전) 기본 너비 설정 기본값:auto
flex-basis : 중요함 공간 배치를 효과적으로 나눌 수 있다. 

align-self

align-self : 특정 아이템 하나만 선택해 배치를 하고 싶을 때 
align-self : start 특정 아이템 하나만 시작점
align-self : center 특정 아이템 하나만 센터
align-self : end 특정 아이템 하나만 끝