Flex
플렉스 박스 레이아웃을 사용하려면 콘텐츠를 플렉스 컨테이너로 묶어주어야 한다.
display: flex; inline-flex;
flex-direction: row; row-reverse; column; column-reverse;
flex-wrap: nowrap;(기본값) wrap; wrap-reverse;
flex-flow: flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정. 기본값은 row nowrap;
justify-content: 주축에서 플렉스 아이템 간 간격을 지정 flex-start; flex-end; center; space-between; spave-around;
align-content: 교차축에서 플렉스 아이템 간 간격을 지정 justify-content와 같고 stretch가 추가
align-items: flex-start; flex-end; center; baseline; stretch;
flex: flex-grow flex-shrink flex-basis
flex-grow: 늘릴 비율
flex-shrink: 줄일 비율
flex-basis: 기본 크기
auto
initial: 기본값
Grid
그리드 레이아웃을 만들 때 가장 먼저 할 일은 그리드 컨테이너를 만드는 것
display: grid; inline-grid;
grid-template-columns: 그리드 컨테이너 안의 항목을 몇 개의 칼럼으로 배치할 지, 각 칼럼의 너비를 얼마로 할지 정한다
grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 2fr 1fr 2fr;
grid-template-columns: repeat(3, 1fr);
grid-template-rwos: 가로뿐 아니라 세로 방향으로도 크기를 지정할 수 있다. 각 항목의 높이를 지정할 때 사용한다.
grid-template-rwos: 100px 200px;
지정한 줄의 높이보다 내용이 더 많을 경우에는 내용이 밖으로 넘친다.
grid-template-rows:minmax(100px auto);
grid-column-gap: 칼럼과 칼럼 사이의 간격
grid-row-gap: 줄과 줄 사이의 간격
grid-gap: grid-row-gap grid-column-gap; 칼럼과 줄의 간격을 한꺼번에 지정할 수도 있다.
