기초공사 (html,css,javascript)

// 좀더 정확히 알고싶어서 해본 예제 parent:400px로 두니 변화를 알수없으니 100%로 두었따. 예시를 보자. flex flex-grow box1 box2 box3 flex-shrink box1 box2 box3 flex-basis box1 box2 box3 flex box1 box2 box3 예시를 보자. flexl-shrink는 기본값이 1이다. 설정을 안해줘도 화면사이즈가 줄어들면 각각 조금씩 축소 되어있다. 1:1:1이 된다. 부모너비가 400px이고 shrink는 200px씩 3개이므로 200px가 넘친다. 그 200px에 대해서 3등분하니 66.66px가 된다. 그래서 각 box1은 200px이니 200px - 66.66px 를 빼서 133.33px가 된다. 여기에서 box3을 fl..

// flex-ex 생활코딩 폴더에서. 예제에서 보면, 컨테이너 너비의 90%만 쓰니 여백이 생긴다. flex-grow:1이여도 여백이 생긴다. max-width가 있어서.. 그래도 삭제하면 다 채워진다. 1. width:160px로 하고, flex-shrink:0 하면 식별이 된다. 하지만 width:80% 퍼센트로 하니 식별이 안된다. 위코드를 보면 max-width를 삭제하고 width:160px는 유지된다. flex-grow:1로 되어있으니 꽉 찬다. flex-shrink를 이해한거같았는데 0을 지워도 똑같네;;;; width:160px px로 고정이 되어있어서 그랬던거네..flex-shrink:0떄문이 아니라....흠..