[230308] flex | grid

윤지수·2023년 3월 8일

CSS 멋쟁이사자처럼

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기

7/51

오늘의 꿀팁

💡 30분 일찍 출근해서 10분이라도 공부하기!
지각도 안하고, 부지런한 모습으로 이미지가 좋아짐 :)

💡 주간 업무 작성 등 항상 작업/성과 정리해 두기!
연봉 협상은 성과가 있어야 성공하기 때문!!

🎨 flex

부모 요소를 flex-container 자식 요소를 flex-item이라고 부른다

flex-container에 사용하는 속성

display: flex
flex-direction
- row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
- column : 위쪽에서 아래쪽 (주축이 열 방향)
- row-reverse : 오른쪽에서 왼쪽 (요소들의 start, end 순서도 뒤바뀜)
- column-reverse : 아래쪽에서 위쪽 (요소들의 start, end 순서도 뒤바뀜)

justify-content
주축을 기준으로 정렬한다
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
align-items : 교차 축을 기준으로 정렬한다
align-content
교차 축을 기준으로 정렬한다
교차 축의 아이템들이 여러 줄일때 사용 가능하다(한 줄만 있는 경우 효과 X)
flex-wrap: wrap인 상태에서 사용해야 한다
flex-wrap
- nowrap : 기본값. 한 줄에 배치한다
- wrap : 가능한 영역 내에서 여러 줄로 나누어 배치한다
- wrap-reverse : 가능한 영역 내에서 여러 줄로 나누어 반대로 배치한다
flex-flow : flex-direction flex-wrap 단축 속성

flex-flow: row wrap;

gap
아이템 사이의 간격

flex-item에 사용하는 속성

flex-grow
아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정한다
형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면 내부에서 동일한 여백 공간을 할당받는다
값을 0을 줄 경우 늘어나지 않는다(기본값: 0)

💡 flex-basis: 0을 주게 되면 여백 공간이 아니라 전체 공간을 원하는 비율로 분할하여 할당받는다
flex-shrink
아이템의 크기를 고정하거나 축소할 때 사용한다
값을 0을 줄 경우 줄어들지 않는다(기본값: 0)
flex-basis
flex-item의 초기 크기를 설정한다
width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가지는 것이다
기본값: auto
flex-basis 값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시된다

💡 기본적으로 px이나 em 등의 단위값을 사용하며 0 외에 다른 상숫값은 사용할 수 없다
flex : flex-grow flex-shrink flex-basis 단축속성
align-self
부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여한다
order
flex-item들의 순서를 수의 크기로 결정한다
수가 작을수록 더 우선순위를 받는다
기본값: 0
음수도 사용 가능하다

💡 논리적인 마크업 순서를 위해 사용할 수 있다

🎨 grid

부모요소를 grid-container 자식요소를 grid-item 이라고 부른다

grid-container에 사용하는 속성

display: grid
grid-template-rows / grid-template-columns
grid-template
행방향/열방향 grid track의 사이즈를 설정한다

💡 fr
- fraction: 분수
- grid 컨테이너 안에서 트랙의 비율을 지정해주는 유연한 길이 단위
- 1fr 1fr 1fr은 1:1:1 의 비율을 의미

💡 repeat()
- 반복되는 값을 자동으로 처리할 수 있는 함수
- 함수에 전달하는 첫번째 인자는 반복 횟수, 두번째 인자는 반복할 값
- grid-track의 사이즈를 좀 더 간단한 형태로 표현하도록 도와준다
```
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-rows: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
/* grid-template-columns: 1fr 2fr 1fr 2fr; */
grid-template-columns: repeat(2, 1fr 2fr);
```
💡 minmax()
- 최솟값과 최댓값을 지정할 수 있는 함수
- grid-track의 사이즈의 최소와 최대 사이의 범위를 설정한다
```
grid-template-rows: repeat(3, minmax(100px, auto));
```
💡 auto-fill / auto-fit
repeat 함수를 사용할 때 반복되는 횟수를 고정하지 않고 컨테이너의 너비에 따라 가능한 많은 그리드 컬럼을 배치하고 싶다면 사용하는 키워드 값
- auto-fill : 모자라면 공간이 남게 될 수 있다
- auto-fit : 남는 공간을 채운다
gap
그리드 셀 사이의 간격
grid-auto-columns / grid-auto-rows
굳이 횟수를 지정해서 반복할 필요 없이 알아서 처리된다

	grid-auto-rows: minmax(100px, auto);

grid-auto-flow
- row
- column
- row dense
- column dense

dense는 기본적으로 빈 셀을 채우는 알고리즘이며 row와 column에 따라 기준이 달라진다

grid-template-areas
grid area에 이름을 붙이고 그 이름을 이용해서 배치한다

	grid-template-areas: 
		"header header header"
		"section section aside"
		"footer footer footer"

align-content / justify-content
Grid 아이템들의 높이/너비를 모두 합한 값이 Grid 컨테이너의 높이/너비보다 작을 때
Grid 아이템들을 통째로 정렬한다
- stretch
- center
- start
- end
- space-around
- space-between
- space-evenly

align-items / justify-items
아이템을 세로(column축), 가로(row축) 방향으로 정렬한다
- stretch
- center
- start
- end

grid-item에 사용하는 속성

grid-column-start, grid-column-end / grid-row-start, grid-row-end
grid-column / grid-row

grid-area

grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;

grid-row: 1/2;

grid-column: 1/4;
/* 1번 라인에서 3칸*/
grid-column: 1/span 3;

grid-area: 1/1/2/4;
grid-area: 1/1/1/span 3; 

grid-area: header;