flex布局二级导航栏

男娘i 2024-04-18 16:02 70阅读 0赞

> 欢迎访问我的博客地址 : [博客地址][Link 1]

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

5.order（flex items）可以控制伸缩项目在他们的伸缩容器出现的顺序,最低为0。  
order:  
6.align-self（flex items）用来在单独的伸缩项目上覆写默认的对齐方式

以上就是flex的主要一些属性

**导航栏代码**

<!DOCTYPE html>
    <html><head>
        <meta charset="utf-8">
        <title>导航栏</title>
        <style>
           body {
          
    				margin: 0;
    				padding: 0;
    			}
    
    			.nav-main {
          
    				display: flex;
    				width: 60%;
    				height: 50px;
    				margin: auto;
    				background-color: #333;
    				flex-flow: row nowrap;
    				justify-content: space-around;
    				align-items: center;
    			}
    
    			.nav-nums {
          
    				width: 130px;
    				height: 50px;
    				line-height: 50px;
    				text-align: center;
    			}
    
    			.nav-nums:hover {
          
    				background-color: olivedrab;
    			}
    
    			.nav-nums>a {
          
    				color: white;
    				text-decoration: none;
    				font-weight: 800;
    			}
    
    			.nav-vr {
          
    				box-shadow: 1px 1px 10px #ccc;
    			}
    
    			.nav-vr>a {
          
    				width: 100px;
    				background: red;
    				color: royalblue;
    				text-decoration: none;
    			}
    
    			.nav-vr>a>li:hover {
          
    				background-color: #ccc;
    			}
    
    			.nav-nums li {
          
    				display: none;
    				list-style: none;
    				height: 40px;
    				line-height: 40px;
    			}
    
    			.nav-nums:hover li {
          
    				display: block;
    			};}
    		
        </style>
    </head>
    <body>
    
        <div class="nav-main">	       	
    		<div class="nav-nums"><a href="">中国</a>
    				<div class="nav-vr">
    					<a href=""><li>北京</li></a>
    					 <a href=""><li>深圳</li></a>
    					 <a href=""><li>上海</li></a>
    					 <a href=""><li>广州</li></a>
    				</div>
    		</div>	
    		<div class="nav-nums"><a href="">韩国</a>
    				<div class="nav-vr">
    					<a href=""><li>首尔</li></a>
    					 <a href=""><li>仁川</li></a>
    					 <a href=""><li>大田</li></a>
    					 <a href=""><li>蔚山</li></a>
    				</div>
    		</div>	
    		<div class="nav-nums"><a href="">美国</a>
    				<div class="nav-vr">
    						<a href=""><li>华盛顿</li></a>
    					 <a href=""><li>旧金山</li></a>
    					 <a href=""><li>纽约</li></a>
    					 <a href=""><li>洛杉矶</li></a>
    					 <a href=""><li>芝加哥</li></a>
    				</div>
    		</div>			
        </div>
        
    </body></html>

在页面上的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjk5MTIy_size_16_color_FFFFFF_t_70]

[Link 1]: http://qianhuine.top:8090/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjk5MTIy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4c8e05b24e7b41f19bbfcb0b2ea5360d.png