CSS Flexbox

by Bathory

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

Demo

인풋 추가 / 인풋 삭제

HTML

<br />
&lt;div class=&quot;input-box&quot;&gt;<br />
	&lt;span&gt;&lt;input type=&quot;text&quot; /&gt;&lt;/span&gt;<br />
	&lt;span&gt;&lt;input type=&quot;text&quot; /&gt;&lt;/span&gt;<br />
	&lt;span&gt;&lt;input type=&quot;text&quot; /&gt;&lt;/span&gt;<br />
&lt;/div&gt;<br />

CSS

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

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

Comments

3 Comments

  1. 황규연

    모바일에서 요긴하게 쓸만한…


Menu