flex - 01

flex기능을 이용하여 메뉴를 만들어보자

<ul class="menu">
		<li class="menu-item">
			<a href="#" class="menu-link">Home</a>
		</li>
		<li class="menu-item">
			<a href="#" class="menu-link">About</a>
		</li>
		<li class="menu-item">
			<a href="#" class="menu-link">Product</a>
		</li>
		<li class="menu-item">
			<a href="#" class="menu-link">Contact</a>
		</li>
	</ul>

.menu {
	display: flex;
}
.menu-item {
	/* flex-grow: 1; */
	width:25%;
	background-color: gold;
	transition: .5s;
}
.menu-item:hover{
	/* flex-grow: 1.5; */
	width:30%;
	background-color: crimson;
}
.menu-link{
	display: block;
	padding:1em;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
.menu-link:hover {
	color:white;
}

부모에 display: flex; 를 선언하여 hover시 item이 커지게 설정하면 손쉽게 메뉴를 만들수있다.