크게 Container와 item의 attribute로 나눌 수 있음
Container의 attribute
- display: flex
- 이것으로 위치를 배치할 수 있게됨, 원래는 float 으로 이미지 / 글의 위치를 정했다.
- flex-direction : row / row-reverse / column / column-reverse
- css의 중심 축을 결정함 (가로 / 세로)
- flex-wrap : wrap / nowrap (default)
- 화면이 좁아질때 아이템들을 다음줄에 위치하게 할건지 (wrap)
- flex-flow
- flex-direction과 flex-wrap을 합쳐서 간략하게 표시
- e.g) flex-flow: column nowrap;
- justify-content : flex-start / flex-end / space-around / space-between / space-evenly
- flex-direction으로 정해진 axis안에서 어떻게 item들을 배치할지 결정
- align-items : baseline
- 반대축에서 item들을 어떻게 배치할지 결정 (같은 줄에서)
- align-content : center
- wrap이 되었을 떄 item들을 어떻게 배치할지 결정 (wrap 되었을 때 줄과 줄의 배치)
item의 attribute
- flex-grow : 숫자 (default : 0)
- container의 넓이가 늘어날때 해당 item이 늘어나는 넓이의 비율
- flex-shirink : 숫자 (default : 0)
- container의 넓이가 줄어들때 해당 item이 늘어나는 넓이의 비율
- flex-basis : N %
- 애초에 item의 사이즈를 container 에 비율로 정해준다.
- align-self : center, bottom ..
- 전체적인 container의 설정과 다르게 하나의 item의 위치를 변환할 때
hiyo