弹性布局 Flexible Box

最新推荐文章于 2025-05-26 01:15:59 发布

Web_Vincent

最新推荐文章于 2025-05-26 01:15:59 发布

阅读量485

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端学习之路文章标签： CSS 弹性布局

本文链接：https://blog.youkuaiyun.com/Web_Vincent/article/details/79921393

Web前端学习之路专栏收录该内容

4 篇文章

订阅专栏

本文分享了使用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}效果要好，因为后者始终有偏移量，我暂时未找到具体原因。弹性布局确实是一个很实用的东西，后续若有新的测试，我会继续补充上来。