[CSS] 스타일 속성 - 레이아웃(flex, grid)

[ Flexbox (Flexible Box Layout) ]

• 요소들을 한 방향(행 또는 열)으로 정렬하기 위한 레이아웃 방식
• 가로/세로 정렬을 쉽게 구현
• 부모 요소를 flex container, 자식 요소를 flex item이라고 함

display:flex;

1. 부모요소(Flex Container) 속성

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
  align-items: center;
  align-content: space-around;
}

속성	설명	예시
display	flex 레이아웃 적용	display: flex;
flex-direction	배치 방향	flex-direction: row;flex-direction: column;
flex-wrap	줄바꿈 여부	flex-wrap: wrap;
justify-content	주축(main axis) 정렬	justify-content: center;justify-content: space-between;
align-items	교차축(cross axis) 정렬	align-items: center;
align-content	여러 줄 정렬	align-content: space-around;

💡주축(Main Axis)? 교차축(Cross Axis)?
- 주축(Main Axis) : flex 아이템이 배치되는 기본 방향
- 교차축(Cross Axis) : 주축과 수직 방향

 

1) flex-direction 값

속성값	설명
row	가로 방향 배치 (왼쪽 → 오른쪽) 기본값
row-reverse	가로 방향 배치 (오른쪽 → 왼쪽)
column	세로 방향 배치 (위 → 아래)
column-reverse	세로 방향 배치 (아래 → 위)

.container{
  display:flex;
  flex-direction:row;
}

 

2) justify-content (주축 정렬)

속성값	설명
flex-start	시작 방향 정렬
flex-end	끝 방향 정렬
center	가운데 정렬
space-between	양 끝은 붙이고 요소 사이 간격 동일
space-around	요소 주변 간격 동일 (양 끝은 절반 간격)

.container{
  display:flex;
  justify-content:center;
}

 

3) align-items (교차축 정렬)

속성값	설명
stretch	늘림 (기본값)
flex-start	시작 정렬
flex-end	끝 정렬
center	가운데 정렬
baseline	텍스트 기준 정렬

.container{
  display:flex;
  align-items:center;
}

 

2. 자식 요소(Flex Item) 속성

.item{
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;

  align-self: center;
}

 

속성	설명	예시
order	아이템 순서 변경	order: 2;
flex-grow	남는 공간을 얼마나 가져갈지	flex-grow: 1;
flex-shrink	공간 부족 시 얼마나 줄어들	flex-shrink: 1;
flex-basis	기본 크기 설정	flex-basis: 100px;
flex	grow, shrink, basis 축약	flex: 1;
align-self	개별 아이템 교차축 정렬	align-self: center;

 

[ Grid Layout ]

• 요소들을 행(row)과 열(column) 기준으로 배치하는 2차원 레이아웃 방식
• 부모 요소를 grid container, 자식 요소를 grid item이라고 함
• 레고 블록을 끼워 맞추듯 배치 가능

⚠️flex와 grid의 차이
- Flexbox는 1차원(행 또는 열), Grid는 2차원(행 + 열) 배치

display: grid /* 블록 레벨 요소 */
display: inline-grid  /* 인라 레벨 요소 */

1. 부모요소 (Grid Container) 속성

.container{
  display:grid;

  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;

  gap:10px;

  justify-content:center;
  align-content:center;
}

 

속성	설명	예시
display	grid 레이아웃 적용	display:grid;
grid-template-columns	열(column) 개수와 크기 설정	grid-template-columns: 200px 200px 200px;
grid-template-rows	행(row) 개수와 크기 설정	grid-template-rows: 100px 100px;
gap	행/열 간격	gap:10px;
column-gap	열 간격	column-gap:20px;
row-gap	행 간격	row-gap:10px;
justify-content	가로 방향 정렬	justify-content:center;
align-content	세로 방향 정렬	align-content:center;

 

 

1) 단위

단위	설명
px	고정 크기
%	부모 기준 비율
fr	남은 공간을 비율로 나눔

.container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr; /* 3열 레이아웃 */
}

 

2) repeat()

• 같은 값을 반복

grid-template-columns:repeat(3, 1fr); /* 1fr 열 3개*/

 

 

2. 자식 요소 (Grid Item) 속성

.item{
  grid-column:1 / 3;
  grid-row:1 / 2;

  justify-self:center;
  align-self:center;
}

속성	설명	예시
grid-column	열 위치 지정	grid-column:1/3;
grid-row	행 위치 지정	grid-row:1/2;
grid-area	영역 지정	grid-area:1/1/2/3;
justify-self	가로 정렬	justify-self:center;
align-self	세로 정렬	align-self:center;

.item{
  grid-column:1/3; /*1번 열부터 3번 열까지 차지*/
}

 

.container{
  display:grid;
  grid-template-columns:200px1fr;
}

.sidebar{
  grid-column:1;
}

.main{
  grid-column:2;
}

 

3. Grid 영역 지정 (Area)

• Grid에서 이름으로 레이아웃을 지정할 수 있음.

1) 부모 요소

.container{
	display:grid;

	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:100px 200px 100px;

	grid-template-areas:
		"header header header"
		"sidebar content content"
		"footer footer footer";
}

속성	설명	예시
grid-template-areas	레이아웃 영역 이름 지정	"header header header"

 

 

2) 자식 요소

.header{
grid-area:header;
}

.sidebar{
grid-area:sidebar;
}

.content{
grid-area:content;
}

.footer{
grid-area:footer;
}

속성	설명	예시
grid-area	아이템이 차지할 영역의 이름	grid-area:header;