[CSS] display : flex, 자식 요소에 영역 비율 할당

 

저 공백 ..!

저 애매하게 위치한 공백 !!!!!

 

 

저 매우 애매한 보라색 공백 ..!!!!

 

뭐지 !!!!

뭐 때문이지 !!!!!

 

어떻게 없앨 수 있지 !!!!!!!!!!!

---

곰곰이 생각해보니 부모 요소에 display : flex;를 해놓고

정작 자식 요소에 flex 의 할당값을 주지 않았다.

 

데헷콩 😉

 

        <div class="contact">
            <h1>CONTACT</h1>
            <ul class="contact_contents">
                <li class="contact_logo">
                    <img src="img/Logo/txt_logo.png" alt="sh_film_txt_logo">
                </li>
                <li class="contact_txt">
                    <div>Addr. 경기도 성남시 분당구 판교역로 123-45 SH FILM <br>
                        Tel. 070-7777-7777<br>
                        Fax. 070-8888-8888<br>
                        E-mail. sh_support@sh_film.co.kr
                    </div>
                    <div class="contact_button">
                        CONTACT
                    </div>
                </li>
            </ul>
        </div>

yellow 박스 영역이 .contact_logo

skyblue 박스 영역이 .contact_txt

 

.contact_logo {
    flex: 3;
    line-height: 100px;
    text-align: center;
    width: 25%;
    height: auto;
    background-color: yellow;
}

.contact_txt {
    flex: 7;
    background-color: skyblue;
}

 

쫘좐