til.4 복습 (flex, js

display : flex;

참고 url : https://studiomeal.com/archives/197

• display:flex; 는 부모요소에 씀
• 자식 요소에게 flex : ; 를 줌

flex는 자신 내용물의 width값을 가짐
부모의 height와 같은 값을 가짐

- flex-basis : 100px;

컨텐츠의 크기를 지정
컨텐츠들의 크기를 100px로 맞춤
기본 컨텐츠가 100px보다 넓으면 유지
(넘는 컨텐츠의 width값을 같이 조절하면 조절 가능
컨텐츠가 설정한 width값보다 크면 튀어나오기 때문에
word-wrap: break-word; 사용)

- flex-grow : 1; (기본값 : 0)

컨텐츠들의 크기를 제외하고 남는 여백을 지정된 숫자 비율로 나누어 가짐

/ 1:2:1의 비율로 세팅할 경우 /
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

- flex-shirink : 1; 기본값

• 컨텐츠들의 크기를 자동으로 줄여주는 역할
• flex-shirink = 0; 을 쓰고 총 basis가 컨테이너보다 클 시, 튀어나옴

flex

• 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 : 1 1 0;

• 컨테이너 크기에 맞게 줄여주고 컨테이너 내부 공간을 1 : 1 : 1 비율로 가져라

---

JS

• const 상수명 = document... 로 접근
• console.log(상수)로 접근 확인

---

추가 예정