Flexbox

Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다

display:flex

부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다

Flex적용전 모습

적용전은 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지한다

Flex적용후 모습

<section>
  <div>box1</div>
  <div>box2</div>
  <div>box3</div>
<section>

section {
display: flex;
}

적용후는 요소들이 왼쪽부터 가로로 정렬되며, 내용만큼 공간을 차지한다

부모요소에 적용해야하는 Flexbox 속성들

Flexbox속성을 사용할 때 유의할 점은 바로 속성을 지정해주는 위치가 중요하다 Flexbox속성 중에서는
부모 요소에 적용해야하는 속성들,
자식 요소에 적용해야하는 속성들이 있다.

flex-direction : 정렬 축 정하기

부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다 미 설정시 기본적으로 가로 정렬을 한다

flex-direction: row

기본값으로 좌측에서 우측으로 정렬된다

flex-direction: column

위에서 아래로 정렬된다

flex-direction: row-reverse

우측에서 좌측으로 정렬된다

flex-direction: column-reverse

아래에서 위로 정렬된다.

flex-wrap : 줄 바꿈 설정하기

하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다 미 설정 시 줄 바꿈을 하지 않는다

flex-wrap: nowrap

기본값 줄바꿈없음

flex-wrap: wrap

웹 페이지의 크기에 따라 위에서 아래로 줄바꿈 된다

flex-wrap: wrap-reverse

웹 페이지의 크기에 따라 아래에서 위로 줄바꿈 된다

justify-content : 축 수평 방향 정렬

자식 요소들 축의 수평 방향으로 어떻게 정렬할 것인지 정한다
요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로방향으론 어떻게 정렬할 것인지 정하는 속성

justify-content: flex-start

좌측부터 순서대로 정렬

justify-content: flex-end

우측부터 순서대로 정렬

justify-content: center

정중앙에 정렬

justify-content: space-between

좌측(공백)중앙(공백)우측 순으로 일정한 간격을 만들어 정렬

justify-content: space-around

(공백)좌측(공백)중앙(공백)우측 순으로 간격을 만들어 정렬

align-items : 축 수직 방향 정렬

자식 요소들을 축의 수직방향으로 어떻게 정렬할 것인지 정한다
요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성

align-items: stretch

너비 및 높이 제약조건 고려하여 크기가 동일하도록 늘어면서 정렬

align-items: flex-start

수직방향 기준 위에서 아래로 정렬

align-items: flex-end

수직방향 기준 아래에서 위로 정렬

align-items: center

수직방향 기준 중앙으로 정렬

align-items: baseline

박스 밑변기준으로 늘어난다

자식 요소에 적용해야 하는 Flexbox 속성

자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있다.
flex속성은 총 3가지 값을 지정해 줄 수 있다.

flex: grow

요소의 크기가 늘어나야 할때 얼마나 늘어날 것인지 팽창 지수 결정

flex: shrink

요소의 크기가 줄어들어야 할때 얼마나 줄어들 것인지 수축 지수 결정

flex: basis

전부 상관없이 요소의 기본 크기는 얼마인지를 의미

flex: grow shrink basis 순으로 적용가능하며
각 값을 따로 지정해 줄 수도 있다.