개발자로서 우리가 해야 할 일 중 하나는 새로운 프로젝트가 주어졌을 때 문제에 접근하는 방법을 파악하는 것입니다. 반응형 웹 사이트로 작업할 때 CSS Grid와 CSS Flexbox 중에서 선택하여 웹 사이트를 레이아웃하는 경우가 많습니다. 이 기사에서는 Grid와 Flexbox의 차이점과 언제 둘 중 하나를 선택하는 것이 가장 좋은지 알아보려고 합니다.
Flexbox – 간략한 개요
CSS Flexbox는 기본적으로 반응형 상자 모델입니다. 컨테이너 내에서 더 나은 위치를 지정할 수 있으며 해당 기능을 알고 있는 한 구현하기가 상당히 쉽습니다.
유연한 상자 모델은 여전히 상자 모델의 모든 속성을 사용하여 여백, 패딩, 테두리 및 콘텐츠를 제어합니다. display: flex를 설정할 때 부모 컨테이너에서는 해당 부모의 자식에 사용할 모든 플렉스 속성을 엽니다.
Flexbox 속성 선택:
- 플렉스 방향 :열 | 행 * | 컬럼 리버스 | 행 반전
- 플렉스 랩 :랩 | 나사 * | 줄바꿈
- 플렉스 흐름 :나열된 처음 두 속성에 대한 바로 가기 -
flex-flow: <flex-direction> <flex-wrap>형식을 따릅니다.; - 내용 정당화: 주축을 따라 항목을 배치합니다. flex-direction이 row로 설정되면 주축은 수평축입니다. 열로 설정하면 기본 액세스는 세로 축입니다.
- justify-content:플렉스 시작* | 플렉스 엔드 | 센터 | 공간 균등 | 스페이스 어라운드 | 사이의 공백
- 항목 정렬: 주 액세스 반대편의 축을 따라 항목을 배치합니다. flex-direction이 column으로 설정되면 수직축이 됩니다. 행으로 설정하면 수평 축이 됩니다.
- 항목 정렬:늘이기 * |center |flex-start |flex-end |기준선
- 정렬: 부모가 표시 속성을 'flex'로 선언한 플렉스 항목에서 사용할 수 있습니다. 플렉스 컨테이너의 정렬을 제어합니다.
- align-self:자동* | 스트레칭 | 센터 | 플렉스 스타트 | 플렉스 엔드 | 기준
* – 속성의 기본 설정
CSS 그리드 – 간략한 개요
CSS 그리드는 사용할 수 있는 또 다른 레이아웃 모델입니다. CSS Flexbox 모델보다 약간 최신 버전이므로 Flexbox만큼 CSS Grid에 대한 브라우저 지원이 광범위하지 않습니다. 세심하게 배치된 열과 행에 2D 레이아웃을 생성할 수 있는 기능이 있습니다. display: grid를 설정할 때 부모 요소에서 사용 가능한 공통 그리드 속성을 사용할 수 있습니다.
CSS 그리드 속성 선택
- 그리드 간격, 그리드 열 간격, 그리드 행 간격: 기본적으로 간격을 설정할 때 사용합니다. 그리드 간격은 열과 행 간격을 모두 제어하기 위한 바로 가기입니다.
- 그리드 템플릿 열, 그리드 템플릿 행: 이렇게 하면 열의 너비, 행의 높이, 각 행의 컨테이너 수 등 그리드에 있는 컨테이너의 기본 형식을 지정할 수 있습니다.
- 내용 정당화 :전체 그리드를 수평으로 정렬합니다.
- 내용 정렬 :전체 그리드를 수직으로 정렬합니다.
- 그리드 열, 그리드 행: 그리드 항목의 너비 또는 높이를 선언할 수 있습니다.
어떤 것을 선택합니까?
CSS Flexbox의 속성은 1차원 레이아웃인 디자인을 허용합니다. 행 또는 열을 사용하여 레이아웃을 생성하도록 설정할 수 있습니다. 이는 콘텐츠 배치보다는 반응형 디자인의 유연성에 더 중점을 둔 웹 페이지에 적합합니다.
대조적으로 CSS 그리드를 사용하면 행과 열이 있는 2차원 공간에서 레이아웃을 만들 수 있습니다. 그리드에 있는 각 컨테이너의 레이아웃과 너비 및 높이를 제어하는 속성이 있습니다. 따라서 이 블로그 상단에 게시된 스테인드 글라스 창과 매우 유사한 그리드로 끝날 수 있습니다.
콘텐츠 배치에 집중하고 공간에서 자식 컨테이너를 제어하려는 경우 Grid가 적합한 레이아웃 형식입니다. Flexbox는 배치보다 콘텐츠의 흐름에 더 중점을 둡니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
Grid에 대한 브라우저 지원은 Flexbox만큼 광범위하지 않습니다. 단순히 Flexbox가 Grid보다 조금 더 오래되었다고 생각하기 때문입니다. 이는 프로젝트에서 사용할 레이아웃 모델을 선택할 때 고려할 수 있습니다.
결론
어떤 레이아웃 모델을 선택하든 두 가지 모두 문제를 해결하는 데 유효한 옵션입니다. CSS Flex 레이아웃 또는 CSS Grid 레이아웃을 선택하는지 실제로 결정하는 것은 프로젝트의 목적이 무엇인지에 달려 있습니다.