Wesbos - Flex Box

---

---

box-sizing

🔥 박스 크기의 기준을 어떤 것으로 설정할 것인가?

1. content-box : 오로지 콘텐트 요소만 포함 (기본값)
2. border-box : 콘텐트 + 보더 + 패딩 값을 모두 포함
3. inherit : 부모 요소로부터 상속

// 대부분의 개발자들은 border-box를 기본값으로 설정해두고 코딩을 함

*{
	box-sizing : border-box;
};

---

justify-content와 align-items

🌸flex-basis와 flex-grow

1. flex-basis

   = flex item의 기본 크기를 설정함 ! (direction이 row면 너비, column이면 높이)

2. flex-grow

   = item이 basis값보다 커질 수 있는지 설정! (기본값은 0, 유연하게 늘어날 수 있도록 설정은 1)

   // 비율 놀이라고 생각해도 편함 !
   .item:nth-child(1) { flex-grow: 1;}
   .item:nth-child(2) { flex-grow: 2;}
   .item:nth-child(3) { flex-grow: 1;}
   
   // 이럴 경우 1: 2: 1 비율로 컨테이너 안에서 크기가 형성됨

---

축약 속성

🔥 flex : grow, shrink, basis;

---

Flex-container와 Flex-items?

🔥 Container는 아이템을 담는 박스라고 생각하면 되고,
item은 개별 객체들이라고 보면 됨 !

// container에 display=flex를 주고, items에는 items에 쓸 수 있는 기능들이 따로 있음

---

flex-basis

🔥 flex를 적용할 경우, item들은 컨텐츠에 맞게 넓이가 설정되는데 basis값을 줄 경우 기본 넓이값이 설정된다.

만약 flex-basis를 100px로 줬는데 아이템 안에 컨텐츠가 100px보다 크다면 컨텐츠 값에 맞게 늘어난다.

즉, 컨텐츠 길이가 basis값보다 작으면 아이템은 basis에 맞춰서 크기가 설정됨 !

---

flex-grow (유연하게 늘리기)

🔥 flex-basis가 갖는 영역을 제외한 여백의 비율을 지정.
기본값 = 0

flex-shrink (유연하게 줄이기)

🔥 flex-basis보다 크기가 줄어들 수 있는가 ?
기본값 : 1

만약, 0으로 값을 설정하면 고정값으로 설정돼 basis의 크기가 고정값으로 지정된다.**

---

최종 완성 코드

const panels = document.querySelectorAll('.panel');

function clicked() {
  this.classList.toggle('open');
  this.classList.toggle('open-active');
}

panels.forEach((div) => div.addEventListener('click', clicked));

---