Categories
Web Publishing

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;을 이용하면 구현이 가능할듯싶습니다.

By Bathory

안녕하세요.

3 replies on “CSS Flexbox”

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다