Flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 오랫동안 CSS 레이아웃을 작성할 수 있는 수단으로 float이나 position이 사용되고 있었다. 하지만 이들은 아래와 같은 레이아웃 구현에서 불리했다.
- 부모 요소 내부에 포함된 블록 콘텐츠를 세로로 중심부에 맞추기 (세로 중앙 정렬)
- 사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 너비와 높이를 똑같은 크기로 점유하기
- 다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택하기.
flexbox는 이러한 레이아웃 관련 작업을 훨씬 쉽게 만들어준다.
[출처: MDN - Flexbox]
- 구성 요소
- Flex Container: 부모 요소
- Flex Item: 자식 요소
- Main Axis(중심축): 아이템들이 배치된 방향
- Cross Axis(교차축, 수직축, 반대축 등으로 불림): 메인축과 수직인 축
display: flex;이 속성을 정의함으로써 item들은 수평축을 중심으로 각자의 너비만큼만 공간을 차지하며 정렬된다. 즉, 기본적으로 가로 방향으로 배치되며, 자신이 가진 내용물의 width 만큼만 차지하게 되는 것이다. height는 container의 높이만큼 늘어난다.
🤔개념
For Container
Container에 적용하는 flexbox 형식
flex-direction
flexbox의 정렬방향의 **main axis(중심축)를 수평축 또는 수직축으로 지정
⇒ row(default), row-reverse, column, column-reverse (reverse는 item의 정렬순서를 뒤집음 (기본은 좌→우, reverse는 우→좌))
flex-wrap
wrapping(한 라인을 다 쓸 경우 다음 라인으로 넘어감) 여부를 지정
nowrap(default), wrap, wrap-reverse
flex-flow
direction과 wrap의 값을 동시에 지정
justify-content
main axis(중심축)을 기준으로 하는 아이템 정렬 방식을 지정한다.
| 값 | 설명 |
|---|---|
| flex-start (기본값) | 아이템들을 시작점으로 정렬 (flex-direction이 row일 때는 왼쪽, column일 때는 위쪽) |
| flex-end | 아이템들을 끝점으로 정렬 (flex-direction이 row일 때는 오른쪽, column일 때는 아래쪽) |
| center | 아이템들을 가운데 정렬 |
| space-around | 아이템들 둘레에 균일한 간격 생성 |
| space-evenly | 아이템들 사이와 양끝 모두에 균일한 간격 생성 |
| space-between | 아이템들 사이에 균일한 간격 생성 |
align-items
cross axis(교차축)의 한 라인내의 아이템 배치방식 지정하며, 아이템을 포함하는 컨테이너를 기준으로 한다.
| 값 | 설명 |
|---|---|
| stretch (기본값) | 아이템들이 교차축 방향으로 쭈욱 늘어남 |
| flex-start | 아이템들을 시작점으로 정렬 (flex-direction이 row일 때는 위쪽, column일 때는 아래쪽) |
| flex-end | 아이템들을 끝으로 정렬 (flex-direction이 row일 때는 아래쪽, column일 때는 오른쪽) |
| center | 아이템들을 가운데 정렬 |
| baseline | 아이템들을 텍스트 베이스라인 기준으로 정렬 |
align-content
cross axis(교차축)을 기준으로 하는 아이템 배치방식 지정하며, 라인이 두 개 이상일 때 의미있는 값이다.
⇒ (flex-start), flex-end, center, space-around, space-evenly, between
What's the difference between align-content and align-items?
For Item
item에 적용하는 flexbox 형식
flex-basis
아이템의 기본 점유 크기를 지정한다. auto, content로 지정하거나, %, px, rem 등의 단위로 수치로 직접 지정할 수도 있다.
| 값 | 설명 |
|---|---|
| auto (기본값) | 아이템의 기본 크기를 지정 |
| content | 아이템을 컨텐츠의 크기로 지정 |
| % | percentage를 컨테이너 내 상대적 비율로 하여 커지거나 작아진다(auto일 경우 부여된 grow, shrink 값에 따라 달라짐). |
flex-grow
item이 flex-basis보다 커져야할 때, 부여한 숫자를 상대적 비율로 하여 컨테이너 내 여백을 채운다. 기본값은 0이며, 0보다 큰 값이 지정되어야 이 속성이 실질적으로 적용된다.
flex-shrink
item이 flex-basis보다 작아져야할 때 부여한 숫자를 컨테이너 내 상대적 비율로 하여 작아진다. 기본값은 1이며, 0보다 큰 값이 지정되어야 이 속성이 실질적으로 적용된다.
flex
flex-grow, flex-shrink, flex-basis를 한 번에 적용할 수 있는 축약형 속성이다.
flex: 1;과 같이 flex-basis를 생략하면 flex-basis의 값은 0이 된다.
align-self
align-items의 아이템 버전으로, 아이템별로 교차축 정렬을 지정한다. 기본적으로 align-items의 설정을 상속받으며, 우선순위는 align-items보다 더 높다.
order
각 아이템에 숫자로 순서를 부여
😎실습
특정 요소는 고정하고 나머지에 반응형 적용
인턴 중에 디자인 업그레이드 프로젝트를 진행 중이었다. 계약서 작성 페이지에 아래 형태의 UI로 작성되는 항목이 있었다. 추가 버튼을 클릭하면 input이 아래로 좌르륵 펼쳐지는 형태이다(물론 각 input 요소에는 삭제 버튼도 존재하지만 생략했다).
또한 UI는 아래와 같이 축소 되었을 때, 버튼이 차지하는 간격은 유지한 채로 반응형으로 동작해야 한다는 요구사항이 있었다.
결론적으로 아래와 같이 세 가지 고려사항이 있었다.
- '추가' 버튼은 첫 번째 항목 근처에 존재해야 한다.
- 두 번째 이후의 항목들의 너비는 첫 번째 항목과 같다.
- '추가' 버튼의 너비는 고정되며, input들의 너비만 반응형으로 확장/축소 된다.
1, 2의 경우는 조건부 렌더링을 사용하면 되었다. 즉, 첫 번째 항목 인덱스의 경우에만 '추가' 버튼을 달아주는 것이다.
3의 경우는 flex-basis, flex-shrink를 활용하면 된다.
input의 flex-shrink: 0로 지정하여 설정한 flex-basis 보다 좁아지지 못하게 하고, '추가' 버튼의 너비는 직접 지정한다.
도움되는 사이트
Flexbox Froggy
