출처: 유노코딩(https://www.youtube.com/watch?v=4EYbDLkuIyw&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=15)
구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술
플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다.
플렉스 박스에서, 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정
플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소
플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스 박스 방식으로 배치되는 요소
플렉스 컨테이너의 주축을 결정하는 속성
행은 가로 축, 열은 세로 축을 의미
속성값 | 의미 |
---|---|
row | 기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일 |
row-reverse | 주축은 행이고 방향은 콘텐츠의 방향과 반대 |
column | 주축은 열이고 방향은 콘텐츠의 방향과 동일 |
column-reverse | 주축은 열이고 방향은 콘텐츠의 방향과 반대 |
플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성
속성값 | 의미 |
---|---|
nowrap | 기본값, 공간이 부족하더라도 요소를 한줄에 배치 |
wrap | 공간 크기에 따라 요소가 여러 행에 걸쳐 배치 |
wrap-reverse | wrap과 동일하나 요소가 나열되는 시작점과 끝점이 반대 |
flex-direction과 flex-wrap을 함께 지정할 수 있는 단축 속성
플렉스아이템들이 플렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정
속성값 | 의미 |
---|---|
flex-start | 기본값, 주축의 시작점으로 부터 끝점을 향해 배치 |
flex-end | 주축의 끝점으로 부터 시작점을 향해 배치 |
center | 주축의 중심부에 배치 |
space-between | 주축에서 일정한 간격을 둔 채 양끝 정렬 배치 |
space-around | 모든 요소가 동일한 여백을 갖도록 배치 |
space-evenly | 모든 요소 사이의 간격을 동일하게 유지해 배치 |
플렉스 컨테이너의 교차축 위에서 플렉스아이템들이 어떤 식으로 정렬될 것인지를 결정
속성값 | 의미 |
---|---|
stretch | 플렉스아이템이 교차축 길이에 맞춰 늘어남, but 너비 or 높이가 우선. |
flex-start | 교차축의 시작점으로부터 끝점을 향해 배치 |
flex-end | 교차축의 끝점으로 부터 시작점을 향해 배치 |
center | 교차축의 중심부에 배치 |
각각의 플렉스아이템이 교차축에서 어떤식으로 정렬될 것인지를 스스로 결정
속성값 | 의미 |
---|---|
stretch | 플렉스아이템이 교차축 길이에 맞춰 늘어남, but 너비 or 높이가 우선. |
flex-start | 교차축의 시작점으로부터 끝점을 향해 배치 |
flex-end | 교차축의 끝점으로 부터 시작점을 향해 배치 |
center | 교차축의 중심부에 배치 |
교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성
위 조건이 만족되면서 여유 공간이 있을 때 동작
플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성
속성값 | 의미 |
---|---|
숫자 | 음수는 허용되지 않습니다. 양의 정수, 양의 실수 가능 |
flex-grow의 반대
플렉스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성입니다.
속성값 | 의미 |
---|---|
숫자 | 음수는 허용되지 않습니다. 양의 정수, 양의 실수 가능 |
플렉스아이템의 초기 크기를 지정합니다. box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정, 기본값은 auto
속성값 | 의미 |
---|---|
단위가 있는 값 | width 속성을 정의할 때와 동일한 방식 |
flex는 flex-grow, flex-shrink, flex-basis 3가지 속성을 정의할 수 있는 단축 속성이다.
(순서는 grow, shrink, basis 순서)
플렉스아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다.
속성값 | 의미 |
---|---|
정수 | 같은 값이면 코드 상의 순서대로! |
격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식
그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정
그리드 컨테이너: 그리드 방식으로 레이아웃을 결정할 요소
그리드 아이템: 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소
fr: 사용가능한 공간에서 비율로 가진다.(1fr 2fr = 남은 공간을 1:2로 가진다.)
그리드 컨테이너의 트랙 중 열(column) 트랙 내 아이템들의 크기를 지정할 수 있는 속성
※ 그리드 컨테이너에서 트랙이란 행 또는 열을 의미
속성값 | 의미 |
---|---|
none | 기본값, 명시한 값이 없으므로 암묵적으로 값이 정해진다. |
수치 | 길이를 나타내는 음수가 아닌 값을 지정 |
그 외 | 다양한 키워드나 CSS 함수를 사용해 지정하기도 한다. |
그리드 컨테이너의 트랙 중 행(row) 트랙 내 아이템들의 크기를 지정할 수 있는 속성
속성값 | 의미 |
---|---|
none | 기본값, 명시한 값이 없으므로 암묵적으로 값이 정해진다. |
수치 | 길이를 나타내는 음수가 아닌 값을 지정 |
그 외 | 다양한 키워드나 CSS 함수를 사용해 지정하기도 한다. |
그리드 아이템 사이의 간격을 지정하는 속성
행에서의 간격과 열에서의 간격을 똑같이 지정할 수 있고, 따로 지정할 수도 있다.
row-gap, column-gap의 단축속성
속성값 | 의미 |
---|---|
normal | 기본값, 명시한 값이 없는 기본적인 상태 |
수치 | 길이를 나타내는 값을 지정. 다양한 단위 사용 가능 |
그리드 컨테이너의 트랙(행과 열) 크기를 지정할 때 사용할 수 있는 유용한 함수들
속성값 | 의미 |
---|---|
repeat() | 반복되는 값을 자동으로 처리할 수 있는 함수 |
minmax() | 최솟값과 최댓값을 각각 지정할 수 있는 함수 |
auto-fill & auto-fit | 반응형을 고려해 사용할 수 있는 키워드들(함수 X) |
그리드 컨테이너의 줄 번호를 이용해 아이템을 배치할 수 있다.
grid-column과 grid-row는 단축 속성이다.
그리드 영역(아이템)의 이름을 이용해 레이아웃의 형태를 정의할 수 있다.
그리드 영역(아이템)의 이름을 지정할 때 사용하는 속성
플렉스박스 방식에서와 유사한 역할
그리드 컨테이너 행 트랙의 높이를 기준으로 그리드 아이템의 배치를 결정
속성값 | 의미 |
---|---|
stretch | 기본값. 그리드 아이템들이 트랙 높이만큼 확장 |
start | 트랙 상단으로부터 하단을 향해 배치 |
end | 트랙 하단으로부터 상단을 향해 배치 |
center | 할당된 공간의 중심부에 배치 |
각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정
속성값 | 의미 |
---|---|
stretch | 기본값. 그리드 아이템들이 트랙 높이만큼 확장 |
start | 트랙 상단으로부터 하단을 향해 배치 |
end | 트랙 하단으로부터 상단을 향해 배치 |
center | 할당된 공간의 중심부에 배치 |
수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성, 그리드 컨테이너에 지정
아이템에 할당된 열 방향 너비가 기준이 된다.
속성값 | 의미 |
---|---|
stretch | 기본값. 그리드 아이템들이 트랙 너비만큼 확장 |
start | 트랙 시작점으로부터 끝점을 향해 배치 |
end | 트랙 끝점으로부터 시작점을 향해 배치 |
center | 할당된 공간의 중심부에 배치 |
수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용하는 속성
각각의 그리드 아이템에 지정
align-items & align-self와 유사
속성값 | 의미 |
---|---|
stretch | 기본값. 그리드 아이템들이 트랙 너비만큼 확장 |
start | 트랙 시작점으로부터 끝점을 향해 배치 |
end | 트랙 끝점으로부터 시작점을 향해 배치 |
center | 할당된 공간의 중심부에 배치 |
플렉스박스 방식과 유사하게 사용
그리드 컨테이너의 수직축(열방향)에서의 아이템 정렬 방식을 결정
컨테이너의 여유 공간이 있을 대 사용할 수 있다.
속성값 | 의미 |
---|---|
start | 트랙의 시작점으로부터 끝점을 향해 배치 |
end | 트랙 끝점으로부터 시작점을 향해 배치 |
center | 트랙의 중심부에 배치 |
space-between | 트랙에서 일정한 간격을 둔 채 양끝 정렬 배치 |
플렉스박스 방식과 유사하게 사용
그리드 컨테이너의 수평축(행방향)에서의 아이템 정렬 방식을 결정
컨테이너의 여유 공간이 있을 대 사용할 수 있다.
속성값 | 의미 |
---|---|
start | 트랙의 시작점으로부터 끝점을 향해 배치 |
end | 트랙 끝점으로부터 시작점을 향해 배치 |
center | 트랙의 중심부에 배치 |
space-between | 트랙에서 일정한 간격을 둔 채 양끝 정렬 배치 |