vue——布局（flex、gride）

关注

VIP免费原创最新推荐文章于 2026-07-04 22:16:58 发布 1.8w 阅读 AI 写同款· GEO 优化 ›

vue自适应布局（各种浏览器，分辨率）主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动，后续我会把完整代码放在个人主页KinHKin的博客_CSDN博客-vue,中秋活动,性能优化领域博主的资源里面，供大家免费下载，希望大家能够喜欢💗💗💗。阅读详情

前端布局发展史：

初代table布局
CSS+div布局
Flex布局（移动端较友好）
grid布局（2020年）

1、Flex布局

实例1 用flex布局制作导航栏

flex:1表示下面的综合：
    flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
    flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
    flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％。

<view class="content">
		<view class="view1">首页</view>
		<view class="view1">新闻</view>
		<view class="view1">体育</view>
	</view>

.content {
		display: flex;
	}

	.view1 {
		flex: 1;
		text-align: center;
		line-height: 50px;
		background-color: #007AFF;
	}

多加一个项也不需要改变代码，

最低0.47元/天解锁文章

标签

#vue.js #html5 #html

Vue布局秘籍：用这些技巧打造炫酷页面！ el-container、el-header、el-aside和el-footer是Element UI框架中的布局组件，有着以下关系：- el-container：容器组件，是整个布局的最外层容器，包含了页面的整体布局。- el-header：头部组件，位于容器组件的顶部，通常用于放置导航栏、logo等。- el-aside：侧边栏组件，放置在容器组件的左侧或右侧，用于放置边栏菜单、快捷导航等。- el-footer：底部组件，位于容器组件的底部，通常用于放置页脚信息、版权声明等。阅读详情

vue——布局（flex、gride）

前端布局发展史：

1、Flex布局

实例1 用flex布局制作导航栏

相关推荐