CSS의 flex
display: flex: flex 초기 설정
justify-content: 요소들을 가로축 상에서 정렬한다.
-center
-flex-start(flex-end): 요소들을 컨테이너 왼쪽(오른쪽)에 정렬한다.
-space-between: 요소들 사이에 동일한 간격을 둔다.
-space-around: 요소들 주위에 동일한 간격을 둔다.
align-items: 요소들을 세로축 상에서 정렬
-flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
-flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
-center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
-baseline: 요소들을 컨테이너의 시작 위치에 정렬한다.
-stretch: 요소들을 컨테이너에 맞도록 늘린다.
align-content: 여러 줄 사이의 간격 지정
flex-direction: 컨테이너 안에서 요소들이 정렬해야 할 방향 지정
-row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
-row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
-column: 요소들을 위에서 아래로 정렬합니다.
-column-reverse: 요소들을 아래에서 위로 정렬합니다.
align-self: align-items가 사용하는 값들을 인자로 받아 개별 요소에 적용되는 속성
order: 순서를 바꿔준다. (기본값은 0)
flex-wrap
-nowrap: 모든 요소들을 한 줄에 정렬합니다.
-wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
-wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-flow:flex-direction과flex-wrap을 간략한 한 속성
-flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
-flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
-center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
-space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
-space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
-stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
CSS의 grid
-
grid-column-start: 그리드의 시작 열 위치 지정
-span: 열 넓이 지정 -
grid-column-end: 그리드의 마지막 열 위치 지정
-
grid-column: 그리드 요소의 열 위치 지정 -
grid-row: 그리드 요소의 행 위치 지정
-
grid-area
-grid-area: 1 / 1 / 6 / 2
-
grid-template: 그리드의 열과 행의 크기와 명칭 지정 -
grid-template-columns: 그리드의 열 크기와 명칭 지정
-grid-template-columns: repeat(8, 12.5%) -
grid-template-rows
-
order: z-index와 같은 기능
회고
flex 게임 - https://flexboxfroggy.com/#ko
grid 게임 - https://cssgridgarden.com/#ko
위 페이지에서 게임을 하면서 flex와 grid에 대한 개념을 다시 한번 훑어보니 더 쉽게 이해하고 정리할 수 있었다.
