Flex는 최대한 예시를 많이 집어 넣으면서 변하는 과정을 볼게요 먼저 박스들을 만들어봅시다. Flex 의 기본 작동 11111 22 3 4444 Flex container 가 될 container 하나와 그안에 박스를 만들 item 4개를 만들어봤습니다. 그리고 container에 Flex를 주면 이렇게 되네요. 이처럼 부모요소인 container 안에 가로로 쭉 배치가 되게 됩니다. 만약 부모요소의 너비값이 이거보다 작으면 어떻게 될까요? 보이는 것처럼 아무 이상이 없는것 처럼 보이지만 개발자 도구를 통해 확인하니 초록색 영역인 부모 너비를 뚫고 나온 모습을 확인할 수 있습니다. 가로로 배치되고, 너비가 충분치 못해도 똑같이 작동하는 것을 확인할 수 있죠. Flex 방향 설정(가로, 세로) Flex는..

Flex-basis basis는 Flex로 구성된 박스의 크기를 설정하는 최소 단위이다. 쉽게말해 기본적으로 크기를 정해주고 만약 내용이 그 크기를 넘는다면 자연스럽게 늘어나게 된다. 아래의 이미지는 예시로 flex-basis를 이용하여 박스의 크기를 키워본 이미지이다. width는 임의로 설정한 item의 기본값 Flex-grow grow는 basis 의 값보다 커질 수 있는지를 지정한다. grow 에 1을 세팅한 경우 1을 설정했을 때 부모요소에 맞춰 크기가 설정된다. 0을 설정하면 부모요소의 너비만큼 기본값을 가지고 나머지 박스들이 크기를 나눠가지게 된다. 1이상의 값들을 설정하면 크기를 비율로 나눠가진다고 생각하면 쉽다. Flex-shrink shrink 는 grow와 반대라고 생각하면 쉽다. b..