Flex布局实例2：自适应导航栏
2017-05-09 本文已影响0人
lijaha
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box{
margin:0px;
background-color:deepskyblue;
display:flex;
flex-flow:row wrap;
justify-content:flex-end;
list-style:none;
}
.box a{
text-decoration:none;
display:block;
color:white;
padding:1em;
}
.box a:hover{
background-color:#00AEE8;
}
@media all and(max-width:800px){
.box{
justify-content:space-around;
}
}
@media all and(max-width:600px){
.box{
flex-flow:column nowrap;
padding:0;
}
.box a{
text-align:center;
padding:10px;
border-bottom:1px solid rgba(0,0,0,0.1);
}
.box li:last-of-type a{
border-bottom:0px;
}
}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">About</a></li>
<ul>
</body>
</html>
大屏：
800中屏：
600小屏：
