CSS Flex와 Grid 제대로 익히기

ys10·2024년 5월 30일

https://www.inflearn.com/course/css-flex-grid-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B5%ED%9E%88%EA%B8%B0/dashboard

gird쪽은 아직 제대로 이해 못하였고, flex부터 확실하게 정리하고 넘어가려한다.

flex 컨테이너에 적용되는 속성들

flex 적용부터 하고~

flex-direction:

아이템들이 배치되는 축의 방향을 결정한다.

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

flex-wrap:

nowrap 이 기본이고 wrap, wrap-reverse 는 각각 줄넘김, wrap의 반대 이다.

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

justify-content:

메인축의 방향으로 컨텐츠를 정렬해준다. 즉 flex-row면 가로축, flex-col이면 세로축이다.

기본값은 flex-start , 시작점으로 정렬한다.
flex-end는 끝에서부터 역순으로 정렬한다.
center는 가운데로 정렬한다.
space-between은 아이템의 사이에 균일한 간격을 만든다.
space-around는 아이템의 둘레에 균일한 간격을 만든다.
space-evenly는 아이템의 사이 및 양 끝에 균일한 간격을 만든다.

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

align-items:

교차축의 방향으로 컨텐츠를 정렬해준다.

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

stretch가 기본값이며 아이템이 교차축 방향으로 끝까지 늘어난다.
flex-start 아이템들을 시작점으로 정렬한다.
flex-end 아이템들을 끝으로 정렬한다.
center 아이템들을 중간으로 정렬한다.
baseline 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

align-content:

wrap으로 두줄이상이 되었을 때 수직축의 정렬을 결정해준다.

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

이렇게 있고, 정렬은 justify랑 같다.

items에 적용되는 속성들

flex-basis:

flex 아이템들의 크기를 결정해준다.
width와 다른점은 basis는 flex-box를 넘어가는 친구들은 그 크기가 유지되지만 width는 그 크기가 width에 고정되어 버린다.

flex-grow:

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

flex-grow의 숫자들은 컨텐츠를 제외한 나머지 여백을 어떻게 나눠가질까에 대한 설정이다.
말로하면 어렵지만 그냥도 이해못하겠당

flex-shrink:

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

기본값은 1이며, 0으로 설정해 주면 basis보다 작아지지 않는다.

flex:

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}