[15주차 주간 발표] Flex, Grid

 

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

위 글을 참고하여 작성했다.

 

 

Flex 아이템 속성

flex-basis

Flex 아이템의 기본 크기를 설정한다. flex-direction이 row면 너비, column이면 높이를 설정한다.

기본 값은 auto이다.

.item {    
    flex-basis: 100px;
}

원래 width가 100px이 넘는 B는 원래의 크기 그대로 유지되고, 원래의 width가 100px이 안 되는 A와 C는 100px로 늘어난다.

 

flex-grow

아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.

기본값이 0이기 때문에 별도로 설정하지 않으면 아이템이 늘어나지 않는다.

flex-grow: 0;

flex-grow: 1;

 

아이템의 flex-basis를 제외한 여백 부분을 flex-grow에서 지정한 숫자의 비율로 나누어 가진다.

위 flex-grow:1; 사진에서 세 아이템의 여백 부분의 크기는 모두 동일하다.

 

.item:nth-child(1) {
  flex-grow: 1;
}

.item:nth-child(2) {
  flex-grow: 2;
}

.item:nth-child(3) {
  flex-grow: 1;
}

A, B, C의 여백이 1:2:1로 설정한 예시이다.

 

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성이다.

기본 값이 1이기 때문에 별도의 설정이 없으면 flex-basis보다 작아질 수 있다.

.item:nth-child(1) {
  flex-shrink: 0;
  width: 100px;
}

.item:nth-child(2) {
  flex-grow: 1;
}

위와 같이 flex-shrink를 0으로 설정하고, width를 설정하면 고정폭 컬럼을 만들 수 있다.

 

 

Grid

flex는 방향축이 하나인 1차원 레이아웃 시스템이고, grid는 방향축이 두 개인 2차원 레이아웃 시스템이다.

.container {
    display: grid;
}

 

그리드 형태 정의

grid-template-rows는 행의 배치를 결정하고, grid-template-columns는 열의 배치를 결정한다.

.container {
    grid-template-columns: 1fr 1fr 1fr;
}

fr은 비율을 나타내기 때문에, 위의 예시는 1:1:1 비율인 3개의 컬럼을 만들겠다는 의미이다.

 

repeat 함수

반복되는 값을 처리할 수 있는 함수이다.

1fr 1fr 1fr 대신 다음과 같이 나타낼 수 있다.

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

 

minmax 함수

minmax(A, B)로 작성하고, 최소한 A, 최대는 B 값을 갖는다는 의미이다.

minmax 적용 전

 

각 행의 최소 높이를 80px만큼 지정하고, 내용이 많아서 80px를 넘어가면 알아서 늘어나도록 아래와 같이 처리해 줄 수 있다.

.container {
    ...
    grid-template-rows: repeat(3, minmax(80px, auto));
}

최소 높이가 지정된 것을 확인할 수 있다.

 

지금은 행 개수를 알 수 있기 때문에 3이라고 설정했지만 행 개수를 알 수 없는 상황에서는 grid-auto-rows를 사용하여

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

위 코드처럼 지정하면 된다.

 

auto-fill과 auto-fit

설정된 너비가 허용하는 최대한의 셀을 채워준다.

.container {
    grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

이 예시에서는 auto-fill을 20%로 설정했기 때문에 한 행에 5개의 셀이 들어가고, 마지막 행은 셀의 개수가 4개이기 때문에 공간이 남게 된다.

(참고로 이걸 auto-fit으로 설정해도 마지막 행의 남는 공간이 채워지지는 않는다.)

 

.container {
    grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fill일 때는 셀의 개수가 모자라면 공간이 남게 되지만

 

.container {
    grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}

auto-fit일 때는 남는 공간을 채운다.

 

 

셀의 영역 지정

위 그림처럼 grid 라인 번호가 매겨지고, 이 번호를 이용해서 column과 row의 범위를 결정한다.

 

시작 번호와 끝 번호를 다음과 같이 작성하여 영역을 지정할 수 있다.

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

 

영역 이름으로 그리드 정의

각 영역에 이름을 붙이고, 그 이름을 이용해서 배치할 수 있는 방법이다.

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"footer footer footer";
}

컨테이너에서 각자 차지하는 셀의 개수만큼 해당하는 위치에 이름을 쓴다. 각 셀은 공백으로 구분한다.

.header {
  grid-area: header;
}

.sidebar-a {
  grid-area: a;
}

.main {
  grid-area: main;
}

.sidebar-b {
  grid-area: b;
}

.footer {
  grid-area: footer;
}

아이템 요소에 grid-area 속성으로 컨테이너에서 작성했었던 이름을 적어준다.