728x90
반응형
CSS의 Flexbox는 다양한 화면 크기에 적응할 수 있는 레이아웃을 손쉽게 만들 수 있는 강력한 도구다.
아래는 Flexbox를 쉽게 이해할 수 있는 예제 코드와 설명을 작성해 보았다.
Flexbox 기초 개념
- Flex 컨테이너 설정: display: flex;를 사용하여 컨테이너 내부의 아이템들을 유연하게 배치할 수 있다.
- 아이템 정렬: justify-content와 align-items를 사용하여 수평과 수직 방향의 정렬을 지정한다.
- flex 속성: 아이템의 크기를 비율로 조정하여 화면 공간을 유연하게 차지하게 할 수 있다.
포스팅 내 예제는 Codepen에서 제공하는 화면 확대/축소(1x, 0.5x, 0.25x)를 활용하면
레이아웃이 어떻게 변하는지 더 쉽게 확인할 수 있다. 필요에 따라 조정해보길 바란다.
1. flex 속성을 이용한 아이템 크기 조절과 수평 정렬
See the Pen 1. flex 속성을 이용한 아이템 크기 조절과 수평 정렬 by CALKO (@CALKO9611) on CodePen.
- display: flex;: 이 속성은 컨테이너를 Flex 컨테이너로 설정
- flex-direction: row;: 아이템들이 가로로 정렬
- justify-content: space-between;: 아이템들 사이에 동일한 간격
- align-items: center;: 교차축(수직 방향)으로 아이템들을 가운데로 정렬
- height: 100vh;: 컨테이너의 높이를 뷰포트 높이의 100%로 설정
- flex: 아이템들이 Flex 컨테이너 내에서 차지하는 공간 비율을 설정한다. flex: 1이면 동일한 크기를 차지하고, flex: 2이면 두 배의 공간을 차지한다.
2. 수직 정렬 사용
See the Pen 2. 수직 정렬 사용 예제 by CALKO (@CALKO9611) on CodePen.
- flex-direction: column;: 아이템들이 세로로 배치
- justify-content: center;: 아이템들을 컨테이너의 가운데에 수직으로 정렬
- align-items: center;: 아이템들이 수평으로 중앙에 위치
3. flex-wrap을 사용한 줄 바꿈
See the Pen 3. flex-wrap을 사용한 줄 바꿈 by CALKO (@CALKO9611) on CodePen.
- flex-wrap: wrap;: 아이템들이 한 줄에 다 들어가지 않으면 줄 바꿈을 해서 새로운 줄에 배치된다.
- flex: 1 1 150px;: 최소 150px의 크기를 가지며, 화면 크기에 따라 유동적으로 크기가 변경된다.
4. align-self로 개별 아이템의 정렬
See the Pen 4. align-self로 개별 아이템의 정렬 by CALKO (@CALKO9611) on CodePen.
align-self: 개별 아이템에 적용되는 속성으로, align-items와는 달리 컨테이너 내에서 개별 요소의 정렬을 다르게 할 수 있습니다.
- align-self: flex-start;: 상단 정렬
- align-self: center;: 중앙 정렬
- align-self: flex-end;: 하단 정렬
이번 포스팅에서는 Flexbox의 기본 개념과 다양한 예제를 통해 실습해보았다. 더 많은 연습을 통해 Flexbox의 유연한 레이아웃을 자유자재로 활용할 수 있도록 노력하고자 한다! 궁금한 점과 잘못된 부분이 있다면 언제든지 댓글로 남겨주세요!
728x90
반응형