CSS Flexbox

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

Demo

인풋 추가 / 인풋 삭제

HTML

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

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;
}

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

“CSS Flexbox” 에 대한 3 댓글

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.