Flex와 Grid

flex와 grid의 차이

 

flex는 컨텐츠이고, grid는 컨테이너다.

즉, flex는 1차원 레이아웃 시스템(수직, 수평 중 택 1)이고 grid는 2차원 레이아웃 시스템(수직, 수평 둘 다 가능)으로 분류된다. flex는 항목을 한 방향으로 레이아웃을 할 수 있고, grid는 항목을 두 방향으로 레이아웃 할 수 있다. 복잡한 레이아웃 설계가 필요할 때 grid를 사용하면 좋다.

 

flex

Flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에서 효율적으로 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 css3의 새로운 레이아웃 방식으로, 1차원 레이아웃 시스템, 구현해야 할 디자인이 간단할 경우, 요소를 정리해야할 경우, 어떤 콘텐츠를 이용할지 정하지 않은 경우에 주로 사용한다.

 

flex 레이아웃 용어

•  Flex container [부모박스] : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소.   
•            - dixplay, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
• Flex item [자식박스] : 플렉스 박스 레이아웃을 적용할 대상으로 Flex container안에 들어있는 Element요소.   
•             - order, flex-grow, flex-shrink, flex, align-self, flex-basis
• Main axis [주측] : 플렉스 컨테이너 안에 플렉스 항목을 배치하며 기본방향. 왼쪽에서 오른쪽(수평 방향)으로 배치.
•  Cross axis [교차축] : 주축과 교차하는 방향. 위에서 아래(수직 방향)으로 배치

 

grid

CSS 그리드 레이아웃(Grid Layout)은  CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있다.  콘텐츠를 행과 열을 배치 할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있다.  2차원 레이아웃 시스템, 구현해야 할 디자인이 복잡 할 경우, 블록 요소 사이에 간격이 있어야 할 경우, 요소를 겹쳐야 할 경우, 레이아웃 디자인이 우선적으로 필요한 경우에 사용하면 좋다.

 

grid 속성

 

부모 속성(container)

• grid-template-rows
• grid-template- columns
• grid-template-areas
• justify-items
• align-items
• align-content

자식 속성(item)

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end
• grid-row
• grid-column
• justify-self
• align-self