슬기로운 개발자생활/Frontend
flex기반 CSS 스킬
개발자 소신
2024. 1. 5. 08:22
반응형
정렬, 요소 배치, 등 웹 화면을 그릴 때 자주 사용하는 CSS 기법들을 정리해보았다.
순서
- 특정 요소 내 정가운데 정렬
- 화면 가운데 정렬
- 내부 요소 크기 조정
1. 특정 요소 내 정가운데 정렬
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
- div 박스 내에 있는 요소를 정가운데에 정렬해야 할 경우 사용한다.
2. 화면 가운데 정렬
.screen-center {
width: 100%;
max-width: 393px; (screen-x 화면 최대 크기)
height: 100%;
display: flex;
align-items: center;
/* fixed center */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 고정된 크기의 모달이나 배경을 화면 정 가운데 위치시킬 때 사용한다.
요소를 담는 배경을 만들어놓고, 해당 요소 안에 flex로 가운데에 배치한다. - 요소 하나만 사용할 것이라면, fixed center 주석 아래 부분만 사용하면 된다.
3. 내부 요소 크기 조정
.flex-three {
flex: 0 0 30%;
}
.flex-two {
flex: 0 0 45%;
}
- 상위 컴포넌트가 flex, flex-wrap일 경우 사용한다.
- 한 줄에 보일 하위 요소 개수를 조절해야할 경우, 맨 뒤에 숫자를 계산하면 된다. 계산법은 100% / item 수 보다 살짝 작게하면 된다. (gap, padding, margin을 넣을 경우 추가 계산 필요)
반응형