Flex / Grid 비교하기

zzzzzang_gu·2023년 4월 17일
CSSfrontend개발공부웹브라우저제로베이스프론트엔드프론트엔드개발자프론트엔드공부프론트엔드스쿨
0

웹(Web)

목록 보기
9/9

📍 들어가며

퍼블리셔로 근무할때나 최근 작업을 하는 경우에도 정렬을 위해 flex 속성 위주로 사용을 했었고 그게 너무 편했다. 너무 flex 속성만 사용하다 보니 grid를 알아봐야지 하면서 나중으로 미뤘었다. 그러다 최근 grid 사용할 일이 생겼는데 머리가 하얘졌다... 이 계기로 grid를 정리하고 알아볼겸 flex와 함께 정리해보고자 한다.

📍 flex / grid 차이점

flex는 1차원의 행 혹은 열의 레이아웃을 위해 설계되었고 , grid는 행과 열 모두를 위한 2차원 레이아웃을 위해 설계되었다.

위 그림을 보면 오렌지 색 박스 요소는 grid로 구현했고 빨간색 박스 요소는 flex로 구현했다.
이는 flex는 행 또는 열 방향으로 1차원적 나열을 구현하지만 grid는 행과 열 모두를 조절한 2차원 나열을 구현한다는 의미다.

Flex는 콘텐츠 위주의 정렬, Grid는 레이아웃 위주의 정렬 ???

플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다. 여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다. 아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 해당 줄의 사용 가능한 공간에 따라 간격이 조정됩니다.

그리드는 레이아웃을 먼저 고려하게 됩니다. CSS 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나, 자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다.

📍 flex 속성

<div class="flex-container">
	<div class="flex-item">F</div>
	<div class="flex-item">L</div>
	<div class="flex-item">E</div>
	<div class="flex-item">X</div>
	<div class="flex-item">B</div>
	<div class="flex-item">O</div>
	<div class="flex-item">X</div>
</div>
.flex-container {
    display: flex;

    flex-direction: row; /* 기본값 */
    /* flex-direction: row | row-reverse | column | column-reverse */
    
    justify-content: flex-start; /* 기본값 */
    /* justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly */
}

Flex 는 각각의 요소를 정렬할 수 있는 효율적인 방법을 제공한다. Flex는 Container 와 items로 나뉘는데 Container는 items를 감싸는 부모 요소이고, 각 item을 정렬하기 위해서는 container가 필수이다. container 와 items 에는 적용하는 속성이 각각 다르다.

  • Container : display , flex-flow , justify-content 등

  • Items : order , flex, align-self 등


flex Container (부모 요소 속성)

flex-direction

플렉스 항목들은 행을 기준으로 배치되며 , flex-direction 속성을 이용해 변경 가능하다. 기본값은 row이다.

  • row : 기본값, 왼쪽에서 오른쪽으로 나열한다. ➡
  • row-reverse : 오른쪽에서 왼쪽으로 나열한다. ⬅
  • column : 항목들을 수직으로 위쪽에서 아래로 나열한다. ⬇
  • column-reverse : 항목들을 수직으로 아래쪽에서 위쪽으로 나열한다. ⬆

flex-wrap

플렉스 항목들이 Container 보다 클 경우 줄바꿈을 할지 안할지 결정한다.

  • nowrap : 기본값, 플렉스 항목들이 wrap되지 않도록 지정
  • wrap : 플렉스 항목들이 컨테이너 안에서 여러 줄로 열 바꿈을 할 수 있게 허용
  • wrap-reverse : 주축은 그대로 유지하면서 교차축을 기준으로 뒤집어서 배치
  • initial : 디폴트 값으로 이 속성을 설정
  • inherit : 부모 요소로부터 값을 상속 받음

justify-content

메인 축 방향 정렬, 기본 가로방향

  • flex-start : 시작점으로 정렬(기본값). 가로 배치는 왼쪽, 세로 배치는 상단
  • flex-end : 마지막점으로 정렬. 가로 배치는 오른쪽, 세로 배치는 하단
  • center : 가운데 정렬
  • space-between : 자식요소 사이에 균일한 간격으로 배치(양쪽 끝 제외)
  • space-around : 자식요소 기준 양쪽에 균일한 간격으로 배치
  • space-evenly : 자식요소 사이에 균일한 간격으로 배치(양쪽 끝 포함)

align-content

justify-content 가 메인 축을 기준으로 배치한다면 align-content는 교차축에 대한 정렬 배치를 하게 된다.

  • flex-start : 시작점으로 정렬
  • flex-end : 마지막점으로 정렬
  • center : 가운데 정렬
  • space-between, space-around, space-evenly : justify-content 와 동작이 같은데 교차축 기준으로 정렬 배치
  • stretch : 같은 비율로 전체 차지

align-items

플렉스 항목의 교차축에 대한 정렬을 각각의 항목들과 연관시켜서 제어, 배치

  • stretch : 수직축 방향으로 전체 차지
  • flex-start : 시작점으로 정렬
  • flex-end : 마미막점으로 정렬
  • center : 가운데 정렬
  • baseline : 텍스트 베이스라인 기준으로 정렬

flex Items (자식 요소 속성)

flex-bais

플렉스 아이템의 너비를 지정할 때 사용 가능하다. flex-basis 속성은 너비 값을 정의하고 플렉스 항목의 초기 크기를 설정한다.

  • flex-basis:auto : 기본 값
  • flex-basis:0 : 여백의 비율이 아닌 영역 자체를 원하는 비율로 설정할 때 유용

flex-grow

플렉스 아이템의 너비를 늘어나도록 정희해 줄 수 있는 속성

  • flex-grow : 1 : 자동으로 플렉스 아이템들의 너비가 컨테이너의 너비를 기준으로 알맞게 균등 배분하여 늘어난다.

  • flex-grow : 0 : 기본값, 플렉스 컨테이너의 너비에 맞춰 늘어나지 않는다는 의미

flex-shrink

flex-grow의 반대의미 , 아이템의 너비를 줄어들도록 정의해 줄 수 있는 속성

  • flex-shrink : 1 : 기본값

  • flex-shrink : 0 : 아이템의 너비가 flex-basis보다 작아지지 않는다.


📍 Grid 속성

Grid 의 행과 열은 grid-template-columns 와 grid-template-rows 프로퍼티로 정의한다. 그리고 Grid에서 비율로는 fr단위를 사용할 수 있다. 일반적인 px 단위와는 달리, fr 단위를 사용해서 행과 열을 가변적으로 조정할 수 있다.

flex와 마찬가지로 Cotainer에 적용하는 속성과 Items에 적용하는 속성이 각각 있다.

  • Grid Track : 그리드 사이사이의 행또는 열 공간
  • Grid Cell : 그리드의 가상의 한 칸
  • Grid Area : 그리드 셀이 묶인 영역
  • Grid Line : 그리드 셀을 구분하는 선
  • Grid Gap : Grid Gutters 라고 하며 셀과 셀간의 간격

Grid Container 속성

grid-template-rows/columns

n 행(열) 크기

  • Grid Track의 크기를 정할 때 사용
  • fr, repeat, minmax 를 사용해 값을 지정할 수 있다.

grid-template-areas 

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }
  • 지정된 grid-area를 참조해 그리드 템플릿을 생성
  • 빈 영역을 만들고 싶을 땐 마침표를 찍는다

grid-template

grid-template-rows, grid-template-columns, grid-template-areas 를 합친 속성

ex)

.container {
  display: grid;
  grid-template:
    "header header header" 100px
    "main main aside" 100px
    "footer footer footer" 100px 
		/ 1fr 1fr 1fr;
}

row-gap / column-gap / gap

셀 사이의 간격을 정할 때 사용

grid-auto-rows / grid-auto-columns

명시적으로 크기가 지정되지 않은 행(열)에 배치되면 이를 유지하기 위해 암시적 그리드 트랙이 생기는데 그 크기를 지정할 때 사용

grid-auto-flow

  • row 가 기본 값이며 각 행 축을 따라 차례대로 배치되고, column은 열 축을 따라 배치
  • row dense 는 각 행 축을 따라 차례대로 배치되는데 빈 영역이 있으면 다른 위치에 있는 그리드 셀이 그 영역을 채운다. column dense는 열 축을 따라 배치하고 빈 영역을 채운다.

grid

grid-template-xxx, grid-auto-xxx의 단축 속성이다.

align-content
그리드 컨텐츠를 수직(열) 정렬할 때 사용한다.

justify-content
그리드 컨텐츠를 수평(행) 정렬할 때 사용한다.

place-content
align-content justify-content

align-items
셀내의 아이템을 수직 정렬할 때 사용한다.

justify-items
셀내의 아이템을 수평 정렬할 때 사용한다.

place-items
align-items justify-items


Grid Items 속성

  • grid-row-start, grid-row-end, grid-row, grid-column-start, grid-column-end, grid-column
    각 셀의 영역을 지정할 때 사용
.item:nth-child(1) {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 2;
}

.item:nth-child(1) {
	grid-row: 1/2 | 1/span 2;
	grid-column: 1/2;
}
  • grid-area : 영역 이름을 지정하여 Container 속성인 grid-template-areas 에서 참조할 수 있다.
  • align-self : 단일 그리드 아이템을 수직(열) 정렬할 때 사용
  • justify-self : 단일 그리드 아이템을 수평(행) 정렬할 때 사용
  • order: integer / 시각적 나열 순서를 결정할 때 사용
  • z-index: auto | integer / z 축 순서를 정할 때 사용하고 작은 값이 가장 밑에 존재하고 그 위로 큰 값들이 위치한다.

📍 참고 사이트

profile
zzzzzang_gu
프론트엔드 개발자가 되겠습니다🔥
이전 포스트

API? REST? REST API? RESTful?

0개의 댓글