본문 바로가기
코드 정리/CSS

CSS 기본 속성(6) 플렉스 정렬

by rien_d 2022. 11. 24.

 

 


 

 

플렉스 정렬

- 부모 요소에 display 값을 flex로 지정하여 정렬하는 방법

- flex : 블록요소

- inline-flex : 인라인 요소

- 블록 요소는 기본적으로 수직으로 쌓이지만 flex를 통해 수평 정렬이 가능하다.

 

<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</body>
.parent {
  width: 400px;
  height: 300px;
  background-color: royalblue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-color: orange;
}

=> flex 적용으로 블록 요소를 쉽게 수평 정렬하였다.

=> 이렇게 flex를 사용하면 부모 요소는 flex container라고 부르며 자식 요소는 flex items라고 부른다.

=> flex container와 flex items에 적용할 수 있는 flex 속성이 따로 정해져 있기에 구분하여 외워야 한다.

 

 

Flex Container 적용 속성

 

flex-direction : 주 축을 설정

- 기본값 row 행축 (좌->우)

- row-reverse 행축 (우->좌)

- column 열축 (위->아래)

- column-reverse 열축 (아래->위)

 

flex-wrap : items 묶음 여부

- 기본값 nowrap 묶음(줄 바꿈) 없음

- wrap : 여러 줄로 묶음

 

기본값과 wrap 적용시

 

justify-content : 주 축의 정렬 방법 (수평 정렬 시 방법)

- 기본값 flex-start 시작점으로 정렬

- flex-end 끝점으로 정렬

- center 가운데 정렬

- space-between 사이를 균등하게 정렬

 

flex-start와 flex-end
center와 space-between

 

align-content : 교차축의 여러 줄 정렬 방법 (수직 정렬 시 방법)

 => 아이템이 두줄 이상, 정렬 가능한 여백이 있어야 사용 가능

- 기본값 stretch 시작점으로 정렬

  - item의 높이값이 없다면 한 줄 최대의 크기로 늘어 남.

- flex-start 시작점으로 정렬

- flex-end 끝점으로 정렬

- center 가운데 정렬

 

stretch와 flex-start

=> 조건이 까다로워 사용 빈도가 떨어짐.

=> align-items로 대체 사용

 

 

align-items : 교차 죽의 한 줄 정렬 방법

- 기본 stretch 교차축으로 늘림

- flex-start 각 줄의 시작점으로 정렬

- flex-end 각 줄의 끝점으로 정렬

- center 각 줄의 가운데 정렬

 

Flex Items 적용 속성

 

order : item의 정렬 순서

- 기본값 0

- 숫자 크기가 작을수록 앞에 정렬

- html을 수정하지 않고 css에서 정렬 가능 장점

 

flex-grow : item의 증가 너비 비율

- 부모 요소의 비워져 있는 공간을 차지하는 비율을 제어

- 기본값 0

- 숫자 (증가 비율)

 

flex-shrink : item의 감소 너비 비율

- 기본값 1 (flex container 너비에 따라 감소 비율 적용

- 숫자 (감소 비율)

 

flex-basis : item의 공간 배분 전 기본 너비

- 기본값 auto 요소의 (content 너비)

- 단위 px em rem

 

  <div class="parent">
    <div class="child">HelloWorld</div>
    <div class="child">i'm</div>
    <div class="child">Rien</div>
  </div>
.parent {
  width: 300px;
  background-color: royalblue;
  text-align: center;
  display: flex;
}
.child {
  background-color: orange;
  border: 1px solid;
  flex-grow: 1;
}

 

자식 요소 전체에 증가 비율을 1로 설정하여 부모 요소의 남은 부분을 1:1:1로 가져가도록 작성하였다.

하지만 정확히 1:1:1의 비율로 나눠지지 않는다.

이유는 flex-basis가 기본값으로 설정되어 있어 요소의 내용들의 크기에 따라 차지하는 크기가 달라진 것이다.

 

=> flex-basis: 0; 으로 작성하면

정확히 1:1:1의 비율로 정렬이 되는 것을 볼 수 있다.