CSS - flex와 grid

웹 화면의 레이아웃을 CSS의 flex와 grid 속성으로 구성할 수 있습니다.

flex

Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다.

flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다.

• flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order

속성	설명
align-content	align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
align-items	align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.
align-self	align-self 속성은 콘텐츠의 정렬 상태를 정의합니다.
flex	flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
flex-basis	flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction	flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow	flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.
flex-grow	flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink	flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap	flex-wrap 속성은 요소의 줄 속성을 설정합니다.
justify-content	justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
justify-items	justify-items 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
justify-self	justify-self 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
place-content	place-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
place-items	place-items 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
place-self	place-self 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
order	order 속성은 flex 콘텐츠의 순서를 정의합니다.

grid

속성	설명
grid	grid 속성을 일괄 설정 하는 단축 속성입니다. (grid-template-xxx, grid-auto-xxx)
grid-area	영역 이름을 설정하거나, grid-row와 grid-column의 단축 속성입니다.
grid-auto-columns	암시적인 열의 크기를 정의합니다.
grid-auto-flow	자동 배치 알고리즘 방식을 정의합니다.
grid-auto-rows	암시적인 행의 크기를 정의합니다.
grid-column	grid-column-xxx의 단축 속성(열 시작/끝 위치)입니다.
grid-column-end	그리드 아이템의 열 끝 위치 지정합니다.
grid-column-gap	행과 행 사이의 간격을 정의합니다.
grid-column-start	그리드 아이템의 열 시작 위치 지정합니다.
grid-gap	xxx-gap의 단축 속성입니다.
grid-row	grid-row-xxx의 단축 속성(행 시작/끝 위치)입니다.
grid-row-end	그리드 아이템의 행 끝 위치 지정합니다.
grid-row-gap	열과 열 사이의 간격을 정의합니다.
grid-row-start	그리드 아이템(Item)의 행 시작 위치 지정합니다.
grid-template	grid-template-xxx의 단축 속성입니다.
grid-template-areas	영역 이름을 참조해 템플릿을 생성합니다.
grid-template-columns	명시적 열의 크기를 정의합니다.
grid-template-rows	명시적 행의 크기를 정의합니다.