Flexbox菜单选项实战

标签：

css code:

.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){
background-color: #39ADD1;
}
.menu li:nth-child(2){
background-color: #3079AB;
}
.menu li:nth-child(3){
background-color: #982551;
}
.menu li:nth-child(4){
background-color: #E15258;
}
.menu li:nth-child(5){
background-color: #CC6699;
}
.menu li:nth-child(6){
background-color: #52AC43;
}
.menu li a{
color: #fff;
text-decoration: none;
}
@media (min-width:480px){
.menu li{
flex: 1 1 50%;
}
}
@media (min-width:768px){
.menu{
flex-flow: row nowrap;
}
}

HTML code:

<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Mongo</a></li>
</ul>

Flexbox菜单选项实战

标签：

原文地址：http://www.cnblogs.com/htmlphp/p/4811605.html