🗒 반응형웹 제작시 유용한 flex box에 대해서 자세히 설명해보겠습니다!

📌 1. Flexible Box 기본개념

Flex box에는 부모-자식 관계가 존재한다.
즉, 부모요소인 Flexible Box 안에는 자식요소 Flex Item이 들어있다

1. 부모박스인 flex container에 display: flex;를 적용하는게 시작이다.

• display: flex; 👉 block 요소와 같은 성향을 가짐 (수직 쌓임)
• display: inline-flex; 👉 inline-block 요소와 같은 성향을 가짐 (수평 쌓임)
  ► 여기서 flex item들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다(inline 요소와 같음) + height는 높이만큼 늘어남

1~7번 : 부모에만 적용 가능(자식 배치)

8번~ : 자식에만 적용 가능

---

📌 2. flex-direction

2. flex item들이 배치되는 축의 방향을 결정한다. (메인축의 방향을 가로로 할지 , 세로로 할지..)

flex-direction 종류 4가지

• row : (아이템/박스를)왼쪽에서 오른쪽 배치
• row-reverse : 오른쪽에서 왼쪽으로 배치
• column : 위에서 아래로 배치
• column-reverse : 아래에서 위로 배치

---

📌 3. flex-wrap

3. flex container(부모)가 더 이상 flex items(자식)을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정

flex-wrap 종류 3가지

• nowrap : 박스를 한 줄에 배치(기본값). 줄바꿈을 하지 않으며, 넘치면 그냥 빠져나감.
• wrap : 박스를 여러줄로 배치. 줄바꿈을 함
• wrap-reverse : 박스를 여러줄로 배치하되, 역방향(역순)으로 배치.

---

📌 4. flex-flow

: flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

/* 예시 */
.opt1{flex-flow: row wrap;} /*왼쪽에서 오른쪽으로 배치, 줄바꿈*/
.opt2{flex-flow: row nowrap;} /*왼쪽에서 오른쪽으로 배치, 줄바꿈 안하고 넘침*/

---

📌 5. justify-content

: 메인축 방향 정렬
justify-content 종류 6개

.opt1{justify-content: flex-start;} /*아이템들을 시작점으로 정렬*/
.opt2{justify-content: flex-end;} /*아이템들을 끝점으로 정렬*/
.opt3{justify-content: center;} /*아이템들을 가운데로 정렬*/
.opt4{justify-content: space-between;} /*마지막 박스는 양쪽 끝으로 붙이고, 아이템들의 "사이(between)"에 균일한 간격 만든다*/
.opt5{justify-content: space-around;} /*아이템들의 "둘레(around)=양쪽 끝에 있는 박스의 양옆"에 균일한 간격을 만들어준다.*/
.opt6{justify-content: space-evenly;} /*모두 똑같은 간격*/

코드 순서대로 결과물

---

📌 6. align-items

: 수직축 방향 정렬
align-items 종류 5개

.opt1{align-items: stretch;} /*(기본값)아이템들이 수직축 방향으로 끝까지 쭈욱 늘어난다*/
.opt2{align-items: flex-start;} /*아이템들을 시작점으로 정렬*/
.opt3{align-items: flex-end;} /*아이템들을 끝으로 정렬*/
.opt4{align-items: center;} /*아이템들을 가운데로 정렬*/
.opt5{align-items: baseline;} /*아이템들을 문자 기준선에 정렬*/

---

📌 7. align-content

: 교차축의 정렬방법으로 "flex-wrap: wrap;"속성을 통해 items가 여러줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다
align-content 종류 7개

.opt1{align-content: stretch;} /*(기본값)아이템들이 수직축 방향으로 끝까지 쭈욱 늘어난다*/
.opt2{align-content: flex-start;} /*아이템들을 시작점으로 정렬*/
.opt3{align-content: flex-end;} /*아이템들을 끝으로 정렬*/
.opt4{align-content: center;} /* 아이템들을 가운데로 정렬*/
.opt5{align-content: space-between;} /*시작item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬*/
.opt6{align-content: space-around;} /*item을 균등한 여백을 포함하여 정렬*/
.opt7{align-content: space-evenly;} /*아이템을 텍스트 베이스라인 기준으로 정렬*/

---

위에 7번까지는 부모에게만 적용 가능한 속성이었다면, 8번부터는 자식에게 적용 가능한 속성이다!

---

📌 8. align-self

: align-items가 전체 item의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬이다.

align-self는 align-item보다 우선권이 있음 (전체 설정보다 개인설정이 우선하기 때문)

align-self 종류 6개

.box1{align-self: auto;} /*기본값*/
.box2{align-self: strech;} /*container의 교차축을 채우기 위해 item을 늘림*/
.box3{align-self: flex-start;} /*item을 각 줄의 시작점으로 정렬*/
.box4{align-self: flex-end;} /*item을 각 줄의 끝점으로 정렬*/
.box5{align-self: center;} /*item을 가운데 정렬*/
.box6{align-self: baseline;} /*item을 문자 기준선에 정렬*/

---

📌 9. flex-grow | flex-shrink | flex-basis

: flex item이 container보다 작거나 클 경우 여백이 생기거나 넘치는 문제가 발생할 수 있다
👉 9번 속성들을 사용하면 item의 크기를 늘이거나 줄일 수 있고 가변적인 박스를 작동하게 할 수 있다

" 모든 자식에 다 넣어줘야 함! "

• flex-basis: 유연한 박스의 기본 영역(반응형)
  예를 들어, 속성값을 0으로 하면 flex item에 flex-grow, flex-shrink 속성 값에서 설정한 비율이 그대로 적용된다.
  속성값을 auto로 하면 플렉스 아이템이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink 속성값에서 설정한 비율이 적용된다.

• flex-grow: 유연하게 늘리기
  (아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성)
  기본값은 0이기 때문에 따로 적용하기 전까지는 아이템이 늘어나지 않는다.

• flex-shrink: 유연하게 줄이기
  (아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성)
  기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

축약형
flex: flex-grow flex-shrink flex-basis
(증가너비 | 감소너비 | 기본너비)
flex: 0 1 auto 👉 기본값 (배율)

---

📚 Reference

: 국비지원 수업