flex - 02

<form class="search-form">
		<input type="search">
		<input type="submit" value="찾기">
	</form>

.search-form{
	display: flex;
	height: 40px;
}
.search-form input[type='search']{
	margin-right: 10px;
	border:0;
	border-radius: 0.3em;
	font-size: 1rem;
	flex: 1;
}
.search-form input[type='submit']{
	width:4em;
	border:0;
	border-radius: 0.3em;
	font-size: 1rem;
	background-color: gold;
}

부모에 display: flex; 선언후 검색창부분에 flex: 1; 를 해주면 컨텐츠길이에맞춰 자동으로 길이조절이 된다.

flex:1 의 의미는

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%

와 같다.