CSS Flexbox

여러가지 방법이 있겠지만 Flexbox를 이용한 유동적으로 늘어나고 줄어드는 input박스를 구현해봤습니다.
요즘 모바일 코딩시 전화번호 입력폼, 주민등록번호 입력폼등에서 많이 사용하고있습니다.
좋은 방법이 될지 확신은 안서지만 가장 편하더군요.-_-

Demo

인풋 추가 / 인풋 삭제

HTML

[html]
<div class="input-box">
<span><input type="text" /></span>
<span><input type="text" /></span>
<span><input type="text" /></span>
</div>
[/html]

CSS

[css]
.input-box {
width:100%;
display:-moz-box;
display:-webkit-flexbox;
display:-webkit-box;
}
.input-box > span {
display:block;
margin:0 10px;
-moz-box-flex:1;
-webkit-flex:1;
-webkit-box-flex:1;
}
.input-box > span:first-child {
margin-left:0;
}
.input-box > span:last-child {
margin-right:0;
}
.input-box > span:before {
content:’-‘;
line-height:30px;
text-align:center;
display:inline-block;
width:20px;
height:30px;
margin-left:-20px;
}
.input-box > span:first-child:before {
display:none;
}
[/css]

구버전 브라우저에서 지원하지 않지만, display:table;을 이용하면 구현이 가능할듯싶습니다.

Published by Bathory

안녕하세요.

Join the Conversation

3 Comments

Leave a comment

댓글 남기기