css3弹性菜单

.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:#F00;}
.menu li:nth-child(2){
background-color:#0FC;}
.menu li:nth-child(3){
background-color:#FF6;}
.menu li:nth-child(4){
background-color:#906;}
.menu li:nth-child(5){
background-color:#9CC;}
.menu li:nth-child(6){
background-color:#C66;}
.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;
}
}

posted @ 2015-07-29 17:50  大发明家  阅读(221)  评论(0编辑  收藏  举报