利⽤flex实现的⼆级导航栏
Flex布局的出现是为了什么
在我⾃⼰看来，flex布局的出现是为了让我们在处理⼀些较⼩且较为复杂的⽹页布局⽽出现的，这种布局⽅式很灵活，容器内的⼦元素能够按照任意的布局⽅式进⾏相应的排列。
为什么我要采取flex的⽅式来写导航栏的原因
在没接触flex布局之前，我写导航栏都是利⽤float来写，其中有些很⿇烦的地⽅，清除浮动什么的都是很扎⼼的⼀些操作，还会有⼀些兼容⽅⾯的问题，但是flex布局⽐较⽅便，当下⼤多数主流的浏览器都会⽀持这个属性。
flex简介(简述⼀些主要的属性和⽤处)
1.display（flex container）表⽰你要采⽤flex布局了
display: other values | flex | inline-flex;
2.flex-flow（flex container) 是flex-direction和flex-wrap的简写，可以同时定义主轴和侧轴
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
3.justify-content（flex container）定义⾥⾯伸缩元素的左右对齐⽅式
justify-content: flex-start | flex-end | center | space-between | space-around;
4.align-items（flex container）定义⾥⾯元素上下对齐⽅式
align-items: flex-start | flex-end | center | baseline | stretch;
order: <integer>
6.align-self（flex items）⽤来在单独的伸缩项⽬上覆写默认的对齐⽅式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
以上就是flex的主要⼀些属性
导航栏代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex 导航栏</title>
<style>
#flex_container {
display: flex;
display: -webkit-flex;
width: 100%;
height: 50px;
flex-flow: row nowrap;
justify-content: space-around;            align-items: center;
}
#flex_item {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color:#333;
font-weight: bold;
background-color:#fff;
}
#flex_item li {
display: none;
list-style: none;
}
#flex_item:hover li {
display: block;
}
</style>
</head>
<body>
<div id="flex_container">
<div id="flex_item">html
<li>span</li>
<li>div</li>
<li>li</li>
</div>
<div id="flex_item">css
<li>width</li>
<li>height</li>
<li>background</li>
</div>
<div id="flex_item">javascript
<li>function</li>
<li>setInterval</li>
<li>var</li>
</div>flex布局对齐方式
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。