container에 지정되는 속성값
display
flex-direction: row(행), column(열), column-reverse, row-reverse
flex-wrap:
nowrap (기본값. wrapping 안함, 부모 넓이에 맞게 요소들의 넓이를 강제 축소. 브라우저 줄여도 item들이 한줄에서 안벗어남. 헷갈릴 수도 있는데 )
wrap (부모 넓이보다 요소들의 넓이가 크면 자동적으로 아래로 내려감)
wrap-revers (거꾸로 정렬되면서 아래로 내려감)
flex-flow : flex-direction flex-wrap (예 : flex-flow: column wrap)
justify-content(x축에서 자식으로 있는 아이템들 어떻게 배치할건지)
: flex-start 왼쪽배치(row) 위에서부터배치(column)
: flex-end 오른쪽배치 땅에붙게배치
: space-around 아이템과 아이템 양옆 padding 똑같이 적용해서 간격 띄워짐
: space-evenly 똑같은 간격으로 배치되어 유지됨
: space-between 왼쪽과 오른쪽 화면에 딱 맞게 배치
align-items (y축에서 아이템들 배치)
:center
:baseline 세로정렬 균등하게.. (vetical-align: middle)
align-content (y축에서 자식으로있는 아이템들 배치) - justify-content 반대개념
: space-between
: center
item에 지정되는 속성값
order: 1,2,3 각각 아이템에 부여하면서 순서바꿈. 아예 사용한적 없음
flex-grow: 컨테이너 사이즈 바꼈을때 1, 2 이런 배율만큼 늘어나는
flex-shrink: 컨테이너 사이즈 바꼈을때 1, 2 배율만큼 줄어듦
flex-basis: auto 또는 % 커질때도 작아질때도 max-width값 유지
align-self: center; 자기자신을 정렬
