.cont_wrap {display:flex; display:-webkit-flex; display:-webkit-box; display:-ms-flexbox;} .cont_wrap .input {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;} .cont_wrap .txt {width:50px;} .cont_wrap .btn {} .cont_wrap .tel {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;} .cont_wrap .dash {width:10px;} <div class="cont_wrap"> <span class="input"> <input type="text" /> </span> <span class="txt">원</span> <a class="btn" href="#">쿠폰적용</a> </div> <div class="cont_wrap"> <input class="tel" type="text" /> <span class="dash">-</span> <input class="tel" type="text" /> <span class="dash">-</span>< <input class="tel" type="text" /> </div>
화면 사이즈에 따라 input 유동적으로 사이즈 변경된다.
ie 11 이상부터 지원되며,
webkit 추가 해야함.
익스에서 사용시 -ms- 추가하면 ie 10부터 적용됨.
* flex:1; 넣은 요소에 display:block; 을 꼭 넣어줘야함.(안드로이드 하위버전을 위해…(화웨이))