JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!--p><b>flexbox로 유연한 메뉴 만들기</b><br>
- 높이에 대한 제한이 없음<br>
- 텍스트가 상하좌우 가운데 정렬이면서 링크영역이 같이 늘어남<br>
- 위에 같은 조건을 가져야 할 경우 flexbox를 사용
</p-->
<ul class="menu">
		<li><a href="#">높이에 대한 제한이 없고 텍스트에 따라서 높이는 같이 늘어나게됨</a></li>
		<li><a href="#">뉴메뉴메뉴뉴메뉴메뉴메뉴</a></li>
		<li><a href="#">메뉴메뉴</a></li>
		<li><a href="#">메뉴메</a></li>
		<li><a href="#">메뉴메뉴메뉴뉴메뉴메뉴뉴메뉴</a></li>
</ul>

<ul class="menu">
		<li><a href="#">뉴메뉴메뉴뉴메뉴메뉴메뉴</a></li>
		<li><a href="#">메뉴메뉴</a></li>
		<li><a href="#">메뉴메</a></li>
		<li><a href="#">메뉴메뉴메뉴뉴메뉴메뉴뉴메뉴</a></li>
</ul>

<ul class="menu">
		<li><a href="#">뉴메뉴메뉴뉴메뉴메뉴메뉴</a></li>
		<li><a href="#">메뉴메</a></li>
		<li><a href="#">메뉴메뉴메뉴뉴메뉴메뉴뉴메뉴</a></li>
</ul>

CSS

* {padding:0;padding:0;text-decoration:none;color:#333333;}

.menu {
	display: -moz-box;
	display: -webkit-box;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-align-content: stretch;
	align-content: stretch;
}
.menu li {background:#eeeeee;
	/* old ver */
	display: -moz-box;
	display: -webkit-box;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	/* new ver */
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-moz-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}
.menu li a {padding:5px;
	/* old ver */
	display: -webkit-box;
	-webkit-box-flex: 1; /* 1/n */
	-webkit-box-pack:center; /* horizontal align */
	-webkit-box-align:center;   /* vertical align */
	/* new ver */
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.menu li:nth-child(odd) a {background:#999999;}
.menu li a:hover {background:#000000;color:#ffffff;}