display flex

레이아웃

✅ 수평정렬 inline-block 사용시, 블록 사이 공백이 생기게 된다. 이를 해결하려면 부모요소에 font-size:0 을 부여해주고 자식에게 다시 font-size를 알맞게 설정해주면 된다.

✅ 논리적 마크업 순서를 지키는 것 중요!

✅ Float 요소 사용시 형제 요소들이 float 요소의 박스를 인식하지 못하기 때문에 **가상 요소(clearfix)**를 사용, 가상의 block formatting context를 생성해주어 자식 요소의 높이값을 품도록 해준다.

또다른 방법으로는 부모 요소에 ** overflow:hidden** 선언을 통해 자식 요소만큼 높이값을 계산해주는 방법이 있다. 단점으로는 부모 요소에 해당 영역이 넘치는 디자인 요소가 들어갈 경우 무용지물이 된다는 점. (다른 방법들도 있지만 위 2가지가 가장 괜찮고 무난한 방법임)

Clearfix를 사용한 레이아웃 형태

 ul::after{
            content: '';
            display: block;
            clear: both;
        }

        li {
            width: 200px;
            height: 400px;
            list-style: none;
            float: left;
        }