给php加自适应底部导航栏,Flex布局实例2：自适应导航栏

.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;

}

}

• Home
• Product
• Connect
• About

大屏：

800中屏：

600小屏：