[CSS] Flexbox 속성 정리

참고자료
1분 코딩- 이번에야말로 Flex를 익혀보자

Flexbox란?

Flexbox는 레이아웃 배치를 위해 최근 고안된 기능이다. 우리는 Flexbox를 사용하여 요소들을 행(row) 또는 열(column)로 배치할 수 있다.
Flexbox는 크기를 미리 알지 못하는 요소들 사이에 공간을 동적으로 배분할 수 있게 해주기 때문에 flexbox라는 용어를 사용한다.

Flexbox 레이아웃을 만들기 위한 기본적인 HTML 구조는 아래와 같다.

<div class="container">
    <div class="item">1x</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

부모 요소인 container를 Flex Container라고 부르고, 자식 요소인 item들을 Flex Item이라고 부른다.

Flexbox의 속성들은 두 가지로 나뉜다.

• 컨테이너에 적용하는 속성
• 아이템에 적용하는 속성

👉 MDN Flexbox Guide

---

Flexbox 컨테이너에 적용하는 속성

display: flex

우선, Flex 기능을 사용하려면 Flex Container에 display: flex;를 적용하여 활성화해야 한다.

.container {
    display: flex;
    /* display: inline-flex; */
}

이 때 Flex의 아이템들은 기본적으로 가로 방향으로 배치되며, width는 자신이 가진 내용물 만큼만, height는 컨테이너의 높이만큼 늘어나 ㅏ지한다.

Flex-Direction

Flex Container 내부에 Flex item을 배치하는 방향을 주축(메인축) 이라고 하며, 주축과 수직인 축을 교차축(수직축) 이라고 한다.flex-direction 속성의 경우, 이 중 주축 방향을 결정하는 속성이다. 즉, 컨테이너 안의 콘텐츠 방향을 결정한다.

<사진>

row(기본값): 아이템이 행 방향으로 배치된다.(왼쪽 → 오른쪽)
row-reverse: 아이템이 행 방향인데 역순으로 배치된다.(오른쪽 → 왼쪽)
column: 아이템이 열 방향으로 배치된다.(위 → 아래)
column-reverse: 아이템이 열 방향인데 역순으로 배치된다.(아래 → 위)

아래 코드에서 background-color가 남색인 section태그에 flex-direction값을 다 다르게 주었다. 이에 따라 안에 있는 정사각형 div가 어떻게 정렬되는지 확인해보면 이해가 쉽다.

👉 MDN Flex-Direction

---

Flex-Wrap

flex-wrap 속성은 Flex Item들이 Flex 컨테이너 크기를 벗어나 더 이상 한 줄에 아이템을 담을 여유 공간이 없을 때, 아이템 줄바꿈을 어떻게 처리할지 결정하는 속성이다.(주축이 수평이면, 행을 하나 더 만들고, 주축이 수직이면 열을 하나 더 만든다.)

nowrap (기본값): 줄 바꿈 없이 한 줄에 표시한다 → 자식 태그의 flex-shrink값에 따라, 부모를 벗어나거나, 부모에 맞게 자식 요소의 크기가 줄어든다.
wrap: 줄바꿈을 한다.
wrap-reverse: 줄바꿈을 하는데, Items를 wrap의 역 방향으로 여러 줄로 묶는다.

nowrap의 경우, 자식 전체 크기가 부모 크기를 벗어난다고 해도 강제로 한 줄에 배치되게 한다. 이 때 자식의 flex-shrink 속성값이 1이냐 0이냐에 따라 동작 방식이 살짝은 다르다.

아래 예제를 통해 속성값에 따른 배치 변화를 살펴보자.

👉 MDN Flex-Wrap

---

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다. flex-direction, flex-wrap의 순으로 한 칸 떼고 쓰면 된다.

.container {
    flex-flow: row wrap;
    /* 아래의 두 줄을 줄여 쓴 것 */
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
}

justify-content : 주축 방향 정렬

justify-content 속성은 주축(main axis)을 따라 요소들을 어떻게 정렬할지 결정하는 속성이다.이 때, flex-direction을 어떤 걸로 선택했느냐에 따라 justifiy-content의 결과가 달라진다. 만약에 justifiy-content:flex-start라 해보자. 이때 flex-direction: row라면, start는 맨 왼쪽일 것이고, flex-direction: row-reverse라면 start는 맨 오른쪽이 된다.

속성값

flex-start (기본값): 아이템들을 시작점을 기준으로 정렬한다.
flex-end: 아이템들을 끝점으로 정렬한다.
center: 아이템들을 가운데로 정렬한다.
space-between: 아이템들 사이에 동일한 간격 → 바깥쪽 여백(요소와 컨테이너 사이) 없음!!
space-around: 아이템들의 둘레 동일한 간격 → 바깥쪽 여백은 요소 사이 여백의 1/2
space-evenly: 아이템들의 사이와 양 끝에 동일한 간격 → 바깥쪽 여백, 요소 사이 여백 모두 동일

👉 MDN Justify-Content

---

Align-Items : 교차축 방향 정렬

align-items 속성은 교차축(cross axis)을 따라 아이템을 정렬하는 속성이다. 즉 ,justify-content와 수직 방향의 정렬이다.

속성값

stretch (기본값): 아이템들이 컨테이너 높이에 맞게 수직축 방향으로 쭉 늘어난다.
flex-start: 아이템들을 시작점으로 정렬한다.
flex-end: 아이템들을 끝점으로 정렬
center: 아이템들을 가운데로 정렬한다.
baseline: 아이템들을 텍스트 기준선을 기준으로 정렬한다.

👉 MDN Align-Items

align-content

flex-wrap 속성의 값이 wrap또는 wrap-reverse로 설정된 상태에서 아이템들의 행이나 열이 2줄 이상 되었을 때 교차축 방향 정렬을 결정하는 속성이다.

---

Flex 아이템에 적용하는 속성

flex-sizing 과 관련된 속성

flex-basis

요소가 배치되기 전(Flex Container에 추가되기 전)에 Flex 아이템의 기본 크기를 설정하는 속성이다. 이 때 결정되는 크기는 주축의 방향에 따라 너비도 될 수 있고 높이도 될 수 있다.

.item {
    flex-basis: auto; /* 기본값 */
    /* flex-basis: 0; */
    /* flex-basis: 50%; */
    /* flex-basis: 300px; */
    /* flex-basis: 10rem; */
    /* flex-basis: content; */
}

flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있으며, auto는 해당 아이템의 width또는 height의 값이다.

flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 0보다 큰 속성값을 부여하면 유연한 박스로 변하며 원래의 크기보다 커지면서 빈 공간을 메우게 된다. 기본값은 0이다.

.item {
    flex-grow: 1;
    /* flex-grow: 0; */ /* 기본값 */
}

이 때 flex-basis를 제외하고 남는 공간을 flex-grow에 지정된 숫자의 비율로 나눠갖게 된다.

flex-shrink

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. 1이 디폴트이며, 0보다 큰 값을 부여하면 유연한 박스로 변하고 flex-basis보다 작아진다.

.item {
    flex-basis: 150px;
    flex-shrink: 1; /* 기본값 */
}

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성이다.

.item {
    flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
    flex: 1 1 auto;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    flex: 1 500px;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

이 때, flex-basis를 생략하면 flex-basis의 값이 0이 된다.

align-self

align-self는 align-items과 비슷하지만 아이템 버전 속성이다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향을 정렬하는 속성이다.

기본값은 auto로, 기본적으로 align-items설정을 상속받는다. 하지만 align-self는 align-items보다 우선순위가 높아서 각 아이템에 align-self을 설정해주면 이 설정을 우선으로 적용한다.

👉 MDN Align-Content
👉 MDN Align-Self