플렉스 박스(Flex box)란?

• 플렉스 박스란 CSS3에서 처음 소개된 레이아웃 모델로, 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다.
• 플렉스 박스는 부모 요소인 플렉스 컨테이너(flex container)와 자식 요소인 플렉스 아이템(flex item)으로 구성되어 있다.
• 플렉스 컨테이너는 해당 HTML 요소의 display 속성을 설정하는 것으로 정의할 수 있다.
• 플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치하게 된다.
  

1. display 속성

---

1) flex

• display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. (자식 요소에 display: flex를 적용하면 당연하게도 자식 요소 내부의 자식 요소들이 정렬됨)
• 부모 요소에 display: flex를 지정하면 flex item(자식 요소)들은 inline 요소들 처럼 가로 방향으로 배치된다. width는 자신이 가진 content의 width 만큼만 차지하게 되며, height는 container의 높이만큼 늘어난다.

• 예제

<section>
  <article>
    <h2>First article</h2>
    <p>Tacos..</p>
  </article>

  <article>
    <h2>Second article</h2>
    <p>Tacos..</p>
  </article>

  <article>
    <h2>Third article</h2>
    <p>Tacos..</p>
    <p>Cray..</p>
  </article>
</section>

section {  /* article의 부모 요소에 displat : flex 적용 */
display: flex;
}

article {
padding: 10px;
margin: 10px;
background: aqua;
}

• 부모 요소인 <section> 요소에 display: flex 속성을 적용하면 아래와 같이 자식 요소인 <articel> 요소들이 왼쪽부터 가로로 정렬된 것과 content만큼의 공간을 차지하게 변경된다

• display : flex로 지정된 flex container는 block 요소와 같은 성향(수직 쌓임)을 가진다. -> 단, 여기서의 수직 쌓임은 items가 아니라 container이다(내부 item들에는 영향을 주지 않음).

2) inline-flex

• display : inline-flex로 지정된 flex container는 inline- block 요소와 같은 성향(수평 쌓임)을 가진다. -> 단, 여기서의 수평 쌓임은 items가 아니라 container이다(내부 item들에는 영향을 주지 않음)..
• flex를 쓰던 inline-flex를 쓰던 내부 item은 수평으로 정렬되며, flex-container가 2개 이상 연속으로 위치해 있을 때에 block, inline 속성값이 영향을 미친다.
  - 하지만 flex container(부모 요소) 안의 직계 자식 요소들이 반응형으로 동작하지 않기 때문에 거의 사용하지 않는다.

2. flex-direction 속성

---

• flex-direction 속성은 flex container(부모 요소)에 설정해주는 속성으로, flex item(자식 요소)들을 정렬할 정렬 축을 정한다
• 아무 설정을 해주지 않으면 기본적으로 가로 정렬(row)을 한다.
• display : flex와 함께 사용된다.

1) row

• 기본값으로 flex item(자식 요소)들이 왼쪽부터 시작하여 가로 방향으로 정렬된다. (좌 -> 우)

2) row-reversecolumn

• flex item(자식 요소)들이 오른쪽부터 시작하여 가로 방향으로 정렬된다. (우 -> 좌)

3) column

• flex item(자식 요소)들이 위에서부터 시작하여 세로 방향으로 정렬된다. (상 -> 하)

4) column-reverse

• flex item(자식 요소)들이 아래에서부터 시작하여 세로 방향으로 정렬된다. (하 -> 상)

3. flex-wrap 속성

---

• flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈 할 것인지 정한다. 설정해주지 않으면 기본값인 flex-wrap : nowrap이 적용되므로 하위 요소들의 넓이는 flex container(부모 요소)의 넓이에 맞게 모두 자동 축소 또는 확장된다.
• display : flex와 함께 사용된다.

1) nowrap

• flex container(부모 요소)의 넓이에 맞게 flex item(자식 요소)들의 넓이 강제 축소

2) wrap

• flex container(부모 요소)의 넓이보다 flex item(자식 요소)들의 전체 넓이가 더 크다면 나머지 flex container(부모 요소)의 넓이가 넘어가는 flex item(자식 요소)들부터는 다음줄로 줄바꿈 한다.

3) wrap-reverse

• wrap의 역순으로 배열

4. justify-content 속성

---

• justify-content 속성은 flex item(자식 요소)들을 축의 수평(가로) 방향으로 좌우에 대해 어떻게 정렬할 것인지 정한다.
• display : flex와 함께 사용된다.

1) flex-start

• 기본값으로 flex item(자식 요소)들을 flex container(부모 요소)의 왼쪽으로 정렬한다.

2) flex-end

• flex item(자식 요소)들을 flex container(부모 요소) 우측으로 정렬한다.

3) center

• flex item(자식 요소)들을 flex container(부모 요소) 중앙으로 정렬한다.

4) space-between

• flex item(자식 요소)들 사이에 동일한 간격을 준다.

5) space-around

• flex item(자식 요소)들 주위에 동일한 간격을 준다.

• 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정리할 것인지 정하는 속성이다.

• flex-direction: row 인 경우

• flex-direction: column 인 경우

5. align-items 속성

---

• align-items 속성은 flex item(자식 요소)들을 축의 수직(세로) 방향으로 어떻게 정렬할 것인지 정한다.
• 이 속성은 한 줄만을 가지는 flex box에서는 효과가 없으며, 두 줄 이상을 가지는 flex box에서만 효과가 있다.
• display : flex와 함께 사용된다.

1) stretch

• 기본값으로 flex item(자식 요소)의 높이가 flex container(부모 요소)의 높이와 같게 변경된다.
• input 같은 버튼 생성 시 width : auto로 주면 꽉차기 때문에 flex-start로 설정해야 한다.

2) flex-start

• flex item(자식 요소)가 flex container(부모 요소)의 최상단으로 정렬된다.

3) flex-end

• flex item(자식 요소)가 flex container(부모 요소)의 최하단으로 정렬된다.

4) center

• flex item(자식 요소)가 flex container(부모 요소)의 세로 축의 중앙으로 정렬된다.

5) baseline

• flex item(자식 요소)가 flex container(부모 요소)의 기준선(baseline)으로 정렬된다.
• baseline을 적용하면 아래 예제와 같이 글씨의 아래 부분을 기준으로 flex item(자식 요소)들이 정렬된다.

• 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성이다.

• flex-direction: row 인 경우

• flex-direction: column 인 경우