이번에는 flexbox에 대해서 정리를 해보려 합니다. 구현이 쉽지 않은 유연하고 동적인 레이아웃을 간단하게 구현할 수 있도록 도와주는 것이 flexbox인데요 박스들의 크기나 방향, 정렬 등을 유연하게 정리할 수 있어 굉장히 유용한 방식입니다. 보기 편하고 간단하게 자주 쓰는 것 위주로 한번 정리해보겠습니다!
제가 자주 보는 유튜버가 있는데요 많은 사용방법 중 이 분이 강의해주신 영상을 참고로 만들었습니다!
출처 : 유튜브 - 드림코딩 by 엘리
1. flexbox 설정 방법
- 설정하고 싶은 요소들이 들어있는 박스 태그에 display : flex;를 선언한다
.container {
display: flex;
}- flexbox는 기본축과 반대 축으로 이루어져 있다
- 기본적으로 기본축은 가로줄, 반대 축은 세로줄이다. (속성을 이용해서 바꿀 수 있음)
2. 기본 축 방향 설정
- flex-direction
| flex-direction : row(기본값) | 왼쪽에서 오른쪽으로 정렬 |
| flex-direction : row-reverse | 오른쪽에서 왼쪽으로 정렬 |
| flex-direction : column | 위에서 아래로 정렬 |
| flex-direction : column-reverse | 아래에서 위로 정렬 |
3. 줄 바꿈 설정
- flex-wrap
| flex-wrap : nowrap(기본값) | 한 줄에 정렬 |
| flex-wrap : wrap | 위에서 아래로 자동적으로 줄 바꿈 |
| flex-wrap : wrap-reverse | 아래에서 위로 자동적으로 줄 바꿈 |
4. 축 방향과 줄 바꿈 한 번에 설정
- flex-flow : direction 속성 값 + wrap 속성 값
- 예) flex-flow : column wrap, flex-wrap : row-reverse wrap-reverse
예시)
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
5. 박스들의 순서는 그대로 두고 중심축에서 어떻게 배치할지
- justify-content
| justify-content : flex-start(기본값) | 왼쪽 축으로 배치 |
| justify-content : flex-end | 오른쪽 축으로 배치 |
| justify-content : center | 가운데 배치 |
| justify-content : space-around | 박스 바깥쪽에 약간의 여백을 줌 |
| justify-content : space-evenly | 박스 사이에 같은 간격을 줌 |
| justify-content : space-between | 박스 가운데만 간격을 줌 |
예시)
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
6. 반대 축에서 어떻게 배치할지
- align-items : center(가운데), baseline(박스 크기가 바뀌어도 텍스트 기준으로 배치)
- align-content : 5번의 요소들을 사용 가능
7. 박스를 채워서 배치하는 방법
- flex-grow
각 요소에 {flex-grow : 비율(기본값 0)}을 설정하여 박스를 채워서 자동적으로 크기 설정
- flex-shrink
각 요소에 {flex-shrink : 비율(기본값 0)}을 설정하여 박스가 줄어들거나 늘어나는 수치 비율을 조절
- flex-basis
{flex-basis : 차지할 퍼센트(기본값 auto)} 얼마만큼을 차지할지 퍼센트로 표시
- align-self
요소 하나만 따로 배치하고 싶을 때, 예) align-self : center 이 속성이 들어간 요소만 가운데 정렬
예시)
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
이상 여기까지 flexbox에 대해서 정리해보았습니다! 양도 많고 이해가 조금 힘든 부분도 있긴 하지만 굉장히 유용한 레이아웃 배치 방법인 것 같습니다.