[TIL 22] HTML, CSS | flexbox

flexbox

flex box는 CSS3에 추가된 레이아웃 방식으로, flexbox를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있다. float나 display 속성을 이용하는 기존의 방식보다 훨씬 편리해 요즘은 flex를 자주 쓰는 추세라고 한다! (그래도 float, display도 알아야한다. 개발자는 기존의 코드도 이해할 수 있어야하니까!)

flexbox의 구성

• flex container : 상위 부모 요소
• flex item : 자식 요소
  

즉, 한 문장으로 표현하자면❗️

flex container가 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것!

flexbox 만들기

.flex_container {
  display: flex;
}

위의 코드처럼 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex;속성을 선언하면 된다.

display: flex;속성을 주게 되면 아이템들은 가로 방향으로 정렬되고, content의 width만큼만 자리를 차지하게 된다. (inline 요소들처럼!)

먼저 flex container에 적용하는 속성들을 알아보자!

flex-direction

요소들이 배치되는 축의 방향을 설정하는 속성

row

기본값이며 아이템이 가로방향으로 흐른다. (좌 -> 우)

row-reverse

아이템이 역순 가로방향으로 흐른다. (우 -> 좌)

column

아이템이 세로방향으로 흐른다. (상 -> 하)

column-reverse

아이템이 역순 세로방향으로 흐른다. (하 -> 상)

flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템을 어떻게 할지 결정하는 속성.

nowrap

기본값, 줄바꿈을 하지 않는다.

wrap

줄바꿈을 한다.

wrap-reverse

줄바꿈을 하며 아이템을 역순으로 배치한다.

flex-flow

flex-direction, flex-wrap을 한번에 지정할 수 있다.

.flex-container {
  flex-flow: column wrap-reverse;
}

justify-content

메인축의 방향으로 아이템을 배치하는 속성

flex-start

시작점으로 정렬

• flex-direction: row : 왼쪽을 기준으로
  

• flex-direction: column : 위를 기준으로
  

flex-end

끝점으로 정렬

• flex-direction: row : 오른쪽을 기준으로
  

• flex-direction: column : 아래를 기준으로
  

center

가운데 정렬

space-between

아이템의 사이에 균일한 간격을 만든다.

space-around

아이템의 둘레에 동일한 간격을 만든다.

space-evenly

아이템들의 사이와 양 끝에 동일한 간격을 만든다.

between, around, evenly 차이점

align-items

수직축의 방향으로 아이템을 배치하는 속성

stretch

기본값, 아이템들이 끝까지 늘어난다.

flex-start

시작점으로 정렬

• flex-direction: row : 위를 기준으로
  

• flex-direction: column : 왼쪽을 기준으로
  

flex-end

끝점으로 정렬

• flex-direction: row : 아래를 기준으로
  

• flex-direction: column : 오른쪽을 기준으로
  

center

가운데 정렬

baseline

텍스트 베이스라인 기준으로 정렬

align-content

flex-wrap: wrap;의 상태에서, 줄바꿈이 되었을 때의 수직축 방향을 어떻게 정렬할 것인지를 결정하는 속성

stretch

flex-start

flex-end

center

space-between

space-around

space-evenly

flex item에 적용하는 속성들을 알아보자!

flex-basis

아이템의 기본 크기를 결정.

• flex-direction: row : 너비
• flex-direction: column : 높이

값에는 각종 단위의 수가 들어갈 수 있다. (%, px, rem 등).
auto가 기본 값이며 해당 아이템의 width값을 사용한다.

.flex-items {
  flex-basis: 50px;
  /* width: 50px; */
  /* 두 속성 동시에 사용 가능 */
}

flex-grow

아이템이 flex-basis의 값보다 커질 수 있는지를 결정.
0보다 큰 값을 세팅하면 해당 아이템이 유연한 박스로 변하고 빈 공간을 메꾼다.

0일 경우

1일 경우

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정.
0보다 큰 값을 세팅하면 해당 아이템이 유연한 박스로 변하고 flex-basis의 값보다 작아진다.

align-self

align-items의 아이템 버전!

order

아이템들의 나열 순서를 결정

.flex-items:nth-child(1) { order: 3; }
.flex-items:nth-child(2) { order: 1; }
.flex-items:nth-child(3) { order: 2; }