css - display

display
Flex Container의 화면 출력(보여짐) 특성
flex => 블럭 요소와 같이 Flex Container 정의
inline-flex => 인라인 요소와 같이 Flex Container 정의

>> flex-direction
주 축을 설정
- row => 행 축 (좌 => 우)
- row-reverse => 행 축 (우 => 좌)
- column => 열 축 (위 => 아래)
- colume-reverse => 열 축 (아래 => 위)

>> flex-wrap
Flex Items 묶음(줄 바꿈) 여부
- nowrap(기본값) => 묶음(줄 바꿈) 없음
- wrap => 여러 줄로 묶음
- wrap-reverse wrap의 반대 방향으로 묶음

>> justify-content
주 축의 정렬 방법
- flex-start(기본값) => Flex Items를 시작점으로 정렬
- flex-end => Flex Items를 끝점으로 정렬
- center => Flex Item를 가운데 정렬
- space-between => 각 Flex Items 사이를 균등하게 정렬
- space-around => 각 Flex Items의 외부 여백을 균등하게 정렬

>> align-content
교차 축의 여러 줄 정렬 방법
- flex-start => Flex Items를 시작점으로 정렬
- flex-end => Flex Items를 끝점으로 정렬
- center => Flex Items를 가운데 정렬
- space-between => 각 Flex Items 사이를 균등하게 정렬
- space-around => 각 Flex Items의 외부 여백을 균등하게 정렬
# align-content는 여러 줄(flex-wrap 속성이 있을 때) 일 때 그리고 빈 공간이 있는 여백이 있어야 정렬이 가능하고 요소가 두 줄 이상일 때
사용 가능하다.

>> align-items
교차 축의 한 줄 정렬 방법
- flex-start => Flex Items를 각 줄의 시작점으로 정렬
- flex-end => Flex Items를 각 줄의 끝점으로 정렬
- center => Flex Items를 각 줄의 가운데 정렬
- baseline => Flex Items를 각 줄의 문자 기준선에 정렬

## align-content와 align-items 차이점
=> content는 두 줄 이상일 경우 사용이 가능하고 그래서 flex-wrap 속성과 같이 쓰이지만
items는 교차 축의 각 줄에서 정렬하기 때문에 더 자주 사용된다.

 

Flex Items

>> order
숫자가 작을수록 우선적으로 정렬된다.
-> 0 : 기본 값

>> flex-grow
flex- itmes의 증가 너비 비율
-> 0 : 기본 값

>> flex-shrink
flex-items의 감소 너비 비율
-> 1 : 기본 값 ( flex container 너비에 따라 감소 비율 적용 )
-> 컨테이너의 너비에 영향을 받아 아이템들의 너비가 찌그러지길 원하지 않다면 0을 적용해 영향을 주지 않을 수 있다.

>> flex-basis
Flex Items의 공간 배분 전 기본 너비
auto : 기본 값(요소의 Content 너비)
단위 : px, em , rem 등 단위로 지정