[CSS] flex, grid

• 아이템들이 배치된 방향의 축을 메인축(Main Axis)
• 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)

flex컨테이너에 적용하는 속성

 

- display : flex; 

.container {
	display: flex;
	/* display: inline-flex; */
}

 

- flex-direction

이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. (기본값)
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

 

- flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

• nowrap (기본값) : 줄바꿈을 하지 않습니다. 넘치면 계속 이어져 나감
• wrap : 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작
• wrap-reverse : 줄바꿈을 하는데, 아이템을 역순으로 배치
• flex-flow
• flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
  flex-direction, flex-wrap의 순으로 한 칸 떼고 작성

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

 

• justify는 메인축 방향으로 정렬
• align은 수직축 방향으로 정렬

justify-content:

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

• flex-start: 요소들을 컨테이너의 왼쪽(시작점)으로 정렬합니다.
  (flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위)
• flex-end: 요소들을 컨테이너의 오른쪽(끝점)으로 정렬합니다.
  flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위(둘레)에 동일한 간격을 둡니다.

 

align-items :

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

이 CSS 속성은 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

align-self : 수직축으로 아이템 정렬

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
}

• 전체 설정보다 개별 설정이 우선

order : 배치순서

• 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다. “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의

z-index

• z-index로 Z축 정렬을 할 수 있어요. 숫자가 클 수록 위로 올라옵니다.
  (position에서의 z-index랑 똑같이 생각하시면 됩니다.)

Flex는 한 방향 레이아웃 시스템이고 (1차원)

Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

.container {
	display: grid;
}

 

• 그리드 형태 정의
• grid-template-rows: 행(row)의 배치
• grid-template-columns : 열(column)의 배치

grid-template-columns: 200px 200px 500px;

는 column을 200px, 200px, 500px로 만들겠다는 의미

grid-template-columns: 1fr 1fr 1fr;

fr은 fraction(뜻은 여기로)인데요, 숫자 비율대로 트랙의 크기를 나눕니다.
즉 위의 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 의미

 

- repeat(반복횟수,반복값)

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

 

-minmax함수 : 최대값과 최솟값을 지정할 수 있는 함수

minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게.. 입니다. 즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 준 예시

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

 

- 각 셀의 영역 지정

grid-column-start (그리드 시작 열위치 지정) 이 단독으로 사용될때는, 한개의 그리드 열(column)을 나타냅니다.

하지만, grid-column-end 속성을 같이 사용하면 여러 열(column)에 걸쳐 확장이 가능

 

**span**을 이용하여 열(column)의 넓이를 지정할 수 있습니다. **span**은 양수만 설정 가능

**grid-area**은 /(슬래쉬)로 구분지어 grid-row-start, grid-column-start, grid-row-end, **grid-column-end**순으로 입력 가능