Flexbox
✅ justify-content
아래 값들을 인자로 받아 아이템을 가로선 상에서 정렬
- flex-start: 아이템을 컨테이너의 왼쪽으로 정렬
- flex-end: 아이템을 컨테이너의 오른쪽으로 정렬
- center: 아이템을 컨테이너의 가운데로 정렬
- space-between: 아이템들 사이에 동일한 간격을 둠
- space-around: 아이템들 주위에 동일한 간격을 둠
✅ align-items
아래 값들을 인자로 받아 아이템을 세로선 상에서 정렬
- flex-start: 아이템을 컨테이너의 상단으로 정렬
- flex-end: 아이템을 컨테이너의 하단으로 정렬
- center: 아이템을 컨테이너의 세로선 상의 가운데로 정렬
- baseline: 아이템을 컨테이너의 시작 위치에 정렬
- stretch: 아이템을 컨테이너에 맞도록 늘림
✅ flex-direction
아래 값들을 인자로 받아 컨테이너 안에서 아이템들이 정렬해야 할 방향을 지정
- row: 아이템을 텍스트의 방향과 동일하게 정렬
- row-reverse: 아이템을 텍스트의 반대 방향으로 정렬
- column: 아이템을 위에서 아래로 정렬
- column-reverse: 아이템을 아래에서 위로 정렬
🔥 column-reverse 또는 row-reverse를 사용하면 아이템들의 start와 end의 순서가 바뀐다.
🔥 Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다.
✅ order
Flex 또는 Container 내에서 현재 아이템의 배치 순서 지정
아래와 같은 형태로 사용
.frog {
order : integer; /* integer에 순서를 넣으면 된다 */
}✅ align-self
align-items가 사용하는 값들을 인자로 받고, 그 값들은 지정된 아이템에만 적용됨
아래 예시 코드의 경우, yellow 클래스에 해당하는 아이템에만 flex-end가 적용된다.
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
align-self: flex-end;
}
✅ flex-wrap
아이템이 컨테이너의 범위를 넘어갈 경우 아이템의 줄바꿈 여부를 결정
- nowrap: 모든 아이템을 한 줄에 정렬
- wrap: 아이템을 여러 줄에 걸쳐 정렬
- wrap-reverse: 아이템을 여러 줄에 걸쳐 반대로 정렬
✅ flex-flow
flex-direction과 flex-wrap 속성의 값들을 인자로 받아 두 속성을 동시에 적용
/* 아이템을 가로선 상의 여러 줄에 걸쳐 정렬 */
flex-flow: row wrap;✅ align-content
아래 값들을 인자로 받아 여러 줄 사이의 간격을 지정
- flex-start: 여러 줄을 컨테이너의 상단에 정렬
- flex-end: 여러 줄을 컨테이너의 하단에 정렬
- center: 여러 줄을 세로선 상의 가운데에 정렬
- space-between: 여러 줄 사이에 동일한 간격을 둠
- space-around: 여러 줄 주위에 동일한 간격을 둠
- stretch: 여러 줄을 컨테이너에 맞도록 늘림
🔥 align-content : 여러 줄 사이의 간격을 지정 // 한 줄만 있을 경우 효과 없음
🔥 align-items : 컨테이너 안에서 아이템들이 어떻게 정렬되는지 지정
🎲Flexbox 참고 사이트
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
Grid
✅ grid-row
grid상 아이템의 행 위치를 설정
grid-row-start: 1;
grid-row-end: 5;
/* 첫 번째 줄에서 5번째 줄까지 */✅ grid-column
grid상 아이템의 열 위치를 설정
🔥 row, column 모두 칸 수가 아닌 줄 수로 설정한다는 점에 유의할 것
✅ grid-area
/(slash)로 구분하여 grid-row-start, grid-column-start, grid-row-end, grid-column-end를 한번에 설정
아래와 같은 형태로 사용
grid-area: 1 / 1 / 3 / 6;
/* grid-row-start, grid-column-start, grid-row-end, grid-column-end */
✅ order
기본적으로 그리드 내 아이템들은 코드에 기입된 순서대로 표기되지만 order를 사용하면 순서 재정의 가능
- order의 default 값은 0이다.
- z-index와 같이 양수와 음수의 값을 모두 설정할 수 있다.
- 숫자가 클 수록 뒤로 배치된다.
✅ grid-template-rows
그리드 컨테이너의 행 비율을 원하는 비율로 설정
grid-template-rows: 20% 20% 20% 20% 20%;
/* 5개의 행을 만드는 5개 값: 각 행은 20%의 너비로 설정 */✅ grid-template-columns
그리드 컨테이너의 열 비율을 원하는 비율로 설정
grid-template-columns: 20% 20% 20% 20% 20%;
/* 5개의 열을 만드는 5개 값: 각 열은 20%의 너비로 설정 */🔥 grid에서는 위와 같은 백분율 값뿐만 아니라 px, em, fr과 같은 길이 단위도 사용할 수 있으며 서로 다른 단위를 함께 사용할 수도 있다.
🔥grid-template-columns: 100px 3em 40%; 이거 사이에 콤마 찍고 왜 안되지...? 하지 않기... 원래 콤마 안 찍음
✅ 주요 grid 사용 단위
- px : 절대적 크기로 고정되며 화면 해상도에 따라 크기가 결정된다.
- em : 해당 아이템의 부모 글꼴 크기를 기준으로 상대적 크기가 결정된다.
- fr : 사용 가능한 공간을 하나로 공유하여 fraction으로 할당한다.
- 두 개의 element들을 1fr과 3fr로 설정 시, 공간이 4 개의 동일한 크기로 설정된다.
- 즉, 각각 영역의 1/4와 3/4를 차지
🔥 열(column)을 pixel, percentage, em으로 설정하면 fr로 설정된 다른 열(column)의 남은 공간으로 나누어진다!
🎲Grid 참고 사이트
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com