flex기반 CSS 스킬

정렬, 요소 배치, 등 웹 화면을 그릴 때 자주 사용하는 CSS 기법들을 정리해보았다.

순서

1. 특정 요소 내 정가운데 정렬
2. 화면 가운데 정렬
3. 내부 요소 크기 조정

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을 넣을 경우 추가 계산 필요)