나만의 작은 도서관
[CSS] Flex와 Grid 속성 정리 본문
유의사항: 해당 글은 공부한 내용을 정리하는 용도이므로, 수정이 필요할 경우 내용의 수정이 있을 수 있습니다.
flex
각 노드의 height는 가장 height가 높은 노드로 고정
- display:flex
- 부모 노드에 설정. 자식 노드들(아이템)을 가로 방향으로 배치.
- flex-direction: row | column | row-reverse | column-reverse;
- 가로로 배치, 세로로 배치. reverse는 좌우 또는 상하 반전 배치.
- flex-wrap: nowrap | wrap | wrap-reverse
- 여유공간이 없을 때 줄바꿈 없음, 해당 노드 위로 줄바꿈, 해당 노드 아래로 줄바꿈
- flex-flow: flex-direction + flex-wrap인 단축 속성
- ex) flex-flow: row wrap
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
- 메인축 방향 정렬
- 111000000
- 000000111
- 000111000
- 10 010 01
- 010 010 010
- 01 01 01 0
- align-items: stretch | flex-start | flex-end | center | baseline
- 수직 방향 정렬
- (기본값) 아래까지 쭉
- 111000000
- 000000111
- 000111000
- 자식노드들의 하단 테두리 수평으로 정렬
- align-content: flex-start | flex-end | center | space-between | space-around | space-evenly
- flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성. 옵션 기능은 justify-content이랑 동일
- flex-basis: auto | X | X% | Xpx | Xrem | content
- flex 노드의 자식노드 최소 크기 설정
- (기본값 auto) 자식노드의 width값
- flex-grow: 0 | 1이상인 수
- 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
- 숫자의 크기에 따라 비율을 나눠갖는다.
- flex-shrink: 0 | 1이상인 수
- 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성
- 숫자의 크기에 따라 비율을 나눠갖는다.
- flex: flex-grow + flex-shrink + flex-basis인 단축 속성
- ex1) flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
- ex2) flex: 1 1 auto = flex-grow: 1; flex-shrink: 1; flex-basis: auto;
- ex3) flex: 1 500px = flex-grow: 1; flex-shrink: 1; flex-basis: 500px;
- align-self: auto | stretch | flex-start | flex-end | center | baseline
- 해당 아이템의 수직축 방향 정렬.
- order: order_id
- 해당 노드가 order_id의 순서를 갖는다
- z-index: z_height
- 해당 노드가 z_height의 높이를 갖는다(기본값 0)
Grid
1차원 배열같은 사용: flex, 2차원 배열같은 사용: grid
- display: grid
- 자식 노드들(아이템)을 가로 방향으로 배치.
- grid-template-(columns | rows):
- 각 grid의 열, 행 크기를 설정.
- ex1) grid-template-columns: 200px 200px 500px;
- ⇒ 열 길이를 각각 200px, 200px, 500px로 설정
- ex1) grid-template-columns: 1fr 3fr 1fr;
- ⇒ 열 길이를 1 : 3 : 1로 설정
- ex1) grid-template-columns: repeat(3, 1fr);
- ⇒ 열 길이를 1 : 1 : 1로 설정
- minmax(min_X, max_X)
- 최소 길이 : min_X, 최대 길이 : max_X
- auto-fill
- 알아서 개수 채우기
- ex1) repeat(auto-fill, minmax(20%, auto));
- [row- | column-]gap
- 그리드 셀 사이의 간격을 설정.
- ex1) row-gap: 10px;
- ex2) column-gap: 20px;
- ex3) gap: 10px 20px;
- grid-auto-(columns | rows)
- 셀의 행, 열의 개수를 알 수 없을 때, 자동으로 개수를 채움
- ex1) grid-auto-rows: minmax(100px, auto);
- ⇒ 행 개수를 minmax에 맞게 알아서 맟춤
- grid-(column-start | column-end) | grid-(row-start | row-end) | grid
- 특정 셀의 크기를 변경(end는 포함 X)
- ex1) [1][1] ~ [2 - 1][3 - 1] 크기로 설정
- grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 3;
- ex2) [1][1] ~ [1+3][1+2] 크기로 설정
- grid-row: 1 / span 3; grid-column: 1 / span 2;
- grid-template-areas
- 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법
.container { grid-template-areas: "header header header" " a main b " " . . . " "footer footer footer"; } .header { grid-area: header; } .sidebar-a { grid-area: a; } .main-content { grid-area: main; } .sidebar-b { grid-area: b; } .footer { grid-area: footer; } - grid-auto-flow: [row | column] [dense]
- 아이템이 자동 배치되는 흐름을 결정하는 속성
- dense는 빈 공간을 최대한 채우는 속성이다.
- align-items: stretch | start | center | end
- 아이템들을 세로(column축) 방향으로 정렬
- justify-items: stretch | start | center | end
- 아이템들을 가로(row축) 방향으로 정렬
- place-items: align-items + justify-items 단축 속성이다.
- align-content: start | center | end | space-between | space-around | space-evenly
- Grid 아이템들의 height를 모두 합한 값이 Grid 컨테이너의 height보다 작을 때 Grid 아이템들을 통째로 정렬.
- justify-content: start | center | end | space-between | space-around | space-evenly
- Grid 아이템들의 width를 모두 합한 값이 Grid 컨테이너의 width보다 작을 때 Grid 아이템들을 통째로 정렬
- place-content: align-content + justify-content 단축 속성이다.
- (align | justify)-self: stretch | start | center | end
- 해당 아이템을 세로(col), 가로(row) 축 방향으로 정렬
- place-self: align-self + justify-self 단축 속성이다.
- order: order_id
- flex와 동일
- z-index: z_height
- flex와 동일
참고한 글
'JavaScript > HTML, CSS' 카테고리의 다른 글
| [HTML] 1. id와 class의 차이점 (0) | 2024.04.17 |
|---|