弹性布局 Flexible Box

本文分享了使用HTML和CSS实现京东APP首页下端导航栏的设计经验。通过结合固定布局与弹性布局,使得导航栏始终保持在屏幕底部并实现均匀分布。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       今天在菜鸟教程(http://www.runoob.com)上看的一篇教程,晚上我也亲自动手实践了一下,感觉非常好,内容很详细,尤其是图形展示非常贴切,一目了然,浅显易懂。特此转载。


弹性布局原文


京东APP首页示例简单框架:


下端导航栏设计心得:

1.核心代码:

HTML部分

<footer>
	                 <ul>
				<li><a href="">首页</a></li>
				<li><a href="">分类</a></li>
				<li><a href="">发现</a></li>
				<li><a href="">购物车</a></li>
				<li><a href="">我的</a></li>
			</ul>
</footer>

CSS部分

footer{
		    background:gainsboro;
		    padding: 20px 0px;
		    border-top: double;
		    
		    /*
		     * 导航栏固定在底部 固定套路
		     */
		    position: fixed;
		    left: 0;
		    bottom:0;

		    width:100%;
		    height: 100px;
		    
		}
                ul{
			width: 100%;
			display: flex;
			/*
			 * 按行均分   display:flex;  flex:1;  这个解决方式最完美  因为弹性布局默认的就是
			 * row  nowrap
			 */

		}
		li{
			list-style-type: none;
			font-size: 50px;
			flex: 1;
		}

2.基本思路

  首先,导航栏要始终固定在屏幕下端,应采用固定布局(position:fixed), 但是导航栏的项目需要采用弹性布局,二者不兼容。于是嵌套一个容器,外层采用<footer></footer>容器和固定布局,内层采用<ul><ul/>容器和弹性布局即可实现对应效果。同时需要注意的是 position:fixed;left:0;buttom:0;width:100%; 这样配合使用才能达到对应的效果。

最后,在导航栏的均匀分布上,直接采用ul{display:flex}   li{flex:1}  让每个项目占用同样比例的位置,相较而言,比ul{display:flex; flex-direction:row;justify:space-between}效果要好,因为后者始终有偏移量,我暂时未找到具体原因。弹性布局确实是一个很实用的东西,后续若有新的测试,我会继续补充上来。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值