justify-content(가로축에서 이동)
align-items(세로축에서 이동)
flex-direction(row, column 방향 설정)
order: 태그의 순서를 바꿔줌
align-self: 개개인의 상하축을 이동할 수 있음
flex-wrap: flex는 한 줄에 나오려는 성질이 있기 때문에 한 줄에 나오는걸 방지할 수 있음
align-content(세로축에서 여러 줄을 이동)
flex-basis: flex 아이템의 기본 크기를 설정할 때 사용(각종 단위의 수가 들어갈 수 있으며, width를 따로 설정하지 않으면 컨텐츠의 크기로 설정된다.)
flex-grow: 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성, 0보다 큰 값이 설정되면 해당 아이템이 원래 크기보다 커지며 빈 공간을 메우게 됨.
flex-shrink: flex-basis의 값보다 작아질 수 있는지를 결정하는 속성, 0보다 큰 값이 설정되면 해당 아이템은 flex-basis보다 작아진다.
flex: flex-grow, flex-shrink, flex-basis를 한번에 사용할 수 있는 속성
ex) flex: 1 = flex-grow: 1; flex-shrink: 1; flex-grow: 0%;
grid-template-columns: 행의 크기를 정의
ex) grid-template-columns: 30% 70%;
grid-template-columns: 3fr 7fr; -> 이 쪽을 더 많이 사용함
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 열의 크기를 정의
gap: 셀 사이의 간격을 의미
grid-auto-columns, rows: 통제를 벗어난 위치에 있는 크기를 지정하는 속성