[FE] Flex vs Grid

Flex

Flexible Box, Flex Box라고도 부름

레이아웃 배치 전용 기능으로 고안

=> float나 inline-block 등을 이용한 방식보다 편리한 기능이 많음...!

Flex의 기본구조

<div class="container">
	<div class="item">item A</div>
	<div class="item">item B</div>
	<div class="item">item C</div>
</div>

부모 요소 : div.container => Flex Container

자식 요소 : div.item => Flex Item

 

Flex의 속성은 크게 컨테이너에 적용되는 속성과 아이템에 적용되는 속성으로 나뉨

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

Flex를 사용하려면 가장 먼저 Flex Container로 사용할 태그에 display: flex;를 적용해 주어야 함

.container {
	display: flex;
}

해당 속성을 적용하면 해당 태그가 Flex Container가 된다...!

Flex Container은 정렬에 관련된 속성들이 적용

Flex Container에 적용되는 속성을 다 다루기에는 너무 많으니까 적당히 모르는 것들 위주로 정리

flex-direction

축의 방향을 설정해 줄 수 있다

flex-direction: row / column / row-reverse / column-reverse; 를 통해서 설정 가능

난 왜 지금까지 align items만 사용했나

난 왜 지금까지 배열을 거꾸로 돌릴 생각만 했나...!!

 

처음 flex를 설정하면  기본값으로 row가 설정

tailwind를 사용할 때는 flex-row, flex-row-reverse 같이 사용해 주면 됨

flex-wrap

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

flex-wrap: nowrap / wrap / wrap-reverse; 를 통해서 설정 가능

• nowrap : 줄바꿈 없이 여유공간이 없으면 container 밖에 item 표시
• wrap: 남는 아이템을 아래쪽으로 줄바꿈
• wrap-reverse: 남는 아이템을 위쪽으로 줄바꿈

tailwind에서 사용할 때는 위와 같이 flex-nowrap 같이 사용...!

flex-flow를 이용해서 위의 두 속성을 한꺼번에 사용 할 수도 있음

flex-flow: row wrap; == flex-direction: row; + flex-wrap: wrap;

방향 정렬

• justify-content : 메인 축 방향으로 아이템들을 정렬
  (기본 값은 flex-start)
• align-items : 수직 축 방향으로 아이템들을 정렬 => tailwind에 items!!
  (기본 값은 stretch)

align-content

줄바꿈이 되었을 때 배치를 어떻게 할 지 결정

flex-wrap속성이 nowrap이 아니여야 함...!

속성의 값들은 justify의 값들하고 동일 => 단 기본값은 stretch로 해당 값은 justify에는 존재하지 않아

tailwind에서는 content-center 같이 사용

아이템에 적용되는 속성들

flex-basis

flex 아이템의 기본 크기를 설정

난.. 왜... 모든 아이템들의 크기를 width로 일일이 설정했는데..?

평소에 width, height 등에 사용하는 각종 단위들이 들어갈 수 있음..!

tailwind에서는 basis-[숫자] 로 사용 가능

flex-basis vs width

만약 아이템의 크기가 flex-basis로 지정한 크기를 넘어 갈 경우 그냥 아이템의 크기 그대로...!

하지만 width로 지정한 경우 아이템의 크기에 상관 없이 width로 지정 => 그럼 아이템이 삐져나가거나~ 줄바꿈이 되거나~

flex-grow

상위 태그의 크기를 하위 태그로 채워줌

flex-grow 0이 기본값으로 되어있음 => 안 늘어나는거

1 이상의 값으로 되어있다면 비율에 맞춰서 여백을 늘려준다

.itemA { flex-grow: 1; }
.itemB { flex-grow: 2; }
.itemC { flex-grow: 1; }

이러면 itemA, B, C가 1 : 2 : 1 비율의 크기로 여백이 늘어난다는 것

tailwind에서는 grow, grow-0으로 사용

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지 결정

숫자 값이 들어가는데 1 이상의 값이 세팅되면 flex-basis보다 작아질 수 있음

=> flex-basis 선언이 필수적이겠지?

0이 세팅되면 flex-basis의 값은 변하지 않아...!

tailwind에서는 shirink, shirink-0으로 사용

+) flex-grow, flex-shrink와 flex-basis는 flex: 1 1 auto; 이런식으로 해서 축약형으로 사용 가능...!

align-self

수직축 정렬의 아이템 버전

align-items보다 우선권을 갖는다!

tailwind에서는 self-auto, self-start 등으로 사용

Grid

두 방향 레이아웃 시스템

=> Flex랑 다르게 2차원이다...!

Grid의 기본 구조

<div class="container">
	<div class="item">item A</div>
	<div class="item">item B</div>
	<div class="item">item C</div>
</div>

여기서 부모 요소인 div.container를 Grid Container라고 부르고,

자식 요소인 div.item들을 Grid Item이라고 명칭

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

Flex와 마찬가지로 컨테이너에 display: grid;를 설정해주어야 함

이때 아이템들이 block요소라면 딱히 변화가 발생하지 않음

그리드 형태 정의

grid-template-rows와 grid-template-columns를 이용해서 컨테이너에 grid 트랙의 크기를 지정해주는 속성

여러가지 단위를 사용할 수 있고 섞어서 사용하는 것도 가능

 

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

=> column을 3개 만들건데요 200px, 200px, 500px로 만들겁니다

=> 비율로 트랙의 크기를 나눌 수도 있다 예를 들어서 1fr 1fr 은 1 대 1 비율로 두개의 column을 생성하겠다는 뜻

 

이걸 repeat(반복횟수, 반복값)을 이용해서도 만들 수 있음

 

tailwind에서는 grid-columns-[200px_200px] 이런 방식으로도 사용 할 수 있고

grid-columns-2 이렇게 써주면 1fr 1fr 이렇게 생성됨!

auto-fill과 auto-fit

repeat(auto-fill, 200px)

=> 한 아이템 당 200px 씩 row에 들어갈 수 있는 최대 개수만큼 들어감

=> 만약 아이템의 개수가 해당 줄을 다 채우지 못하더라도 그냥 공간을 남겨둠

 

repeat(auto-fit, 200px)

=> 한 아이템 당 200px 씩 row에 들어갈 수 있는 최대 개수만큼 들어가는 것을 동일

=> 만약 아이템의 개수가 해당 줄을 다 채우지 못하면 남는 공간을 아이템의 길이나 높이를 늘려서 채움

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'auto-fill-100': 'repeat(auto-fill, minmax(100px, 1fr))',
        'auto-fit-100': 'repeat(auto-fit, minmax(100px, 1fr))',
      },
    },
  },
}

tailwind에서는 직접 지정해줘야 사용할 수 있다...

아이템에 적용되는 속성

.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;
}

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

위의 이미지에 빨간 색 부분을 해당 코드들 (두 css의 결과는 동일)로 표현할 수 있음

첫번째 아이템이 빨간 부분만큼을 차지한다는 의미

tailwind에서는 column-start-숫자로 사용

 

세번 째 코드처럼 시작과 끝지점을 설정하는 것이 아니라 span을 통해 영역을 늘릴 수 도 있음

tailwind에서는 col-span-숫자로 사용하는데 span 숫자/ span 숫자 값이 적용

 

이 외에 다른 정렬들이 많은데 그건 여기서

결국 언제 Flex랑 Grid를 써야하는건데?

Flex

유연하고 간단한 레이아웃 구성 가능

반응형 웹 디자인에 적합

단, 일차원적인 레이아웃만 가능

Grid

복잡하고 정교한 레이아웃 구성 가능

하지만 어렵고, 좀 오래된 브라우저에서는 지원하지 않을수도...

 

=> 그러니까 일차원적인 레이아웃을 만들때는 Flex를 사용해도 상관 없다!

다만 복잡한 레이아웃을 만들어야 할 때는 Grid를 사용하자...!