vue——布局（flex、gride）

科技前沿 • 2025-03-15 12:21 • 阅读 60

大家好，我是讯享网，很高兴认识大家。

前端布局发展史：

初代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; }

多加一个项也不需要改变代码，效果图：

实例2 用flex布局制作列表

讯享网<view class="content"> <view class="view1"></view> <view class="view2"> <view class="view2-1"> 文字1 </view> <view class="view2-2"> 文字2 </view> </view> <view class="view3">确认</view> <view class="view3">取消</view> </view>

.content { height: 120px; margin: 0 10px ; border: 1px solid #b7b2b7; display: flex; align-items: center; justify-content: center; justify-content: space-around; } .view1 { width: 50px; height: 50px; background-color: #B7B2B7; } .view2 { } .view3 { width: 80px; height: 30px; background-color: #00aaff; display: flex; align-items: center; justify-content: center; }

实例3 用flex布局固定百分比布局（其中某一个固定）

讯享网<view class="content"> <view class="view1">1</view> <view class="view2">2</view> <view class="view1">3</view> <view class="view1">4</view> </view>

.content { display: flex; } .view1 { flex: 1; background-color: #B7B2B7; margin: 0 1px; } .view2 { flex: 0 0 50%; background-color: #aaaaff; }

实例4 底部footer固定在底部

页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决

讯享网<view class="content"> <view class="view-main">主要内容</view> <view class="view-footer">底部</view> </view>

.content { display: flex; flex-direction: column; height: 100vh; } .view-main { flex: 1; background-color: #55aaff; } .view-footer { width: 100%; height: 60px; background-color: #ff557f; }

2、grid布局

第一个固定宽度,第三个宽度是第二个的两倍

讯享网<view class="content"> <view class="view-1">1</view> <view class="view-2">2</view> <view class="view-3">3</view> </view>

.content { height: 60px; display: grid; grid-template-columns: 150px 1fr 2fr;//第一个固定宽度,第三个宽度是第二个的两倍 } .view-1 { background: orange; } .view-2 { background: cadetblue; } .view-3 { background: rebeccapurple }

vue——布局（flex、gride）

前端布局发展史：

1、Flex布局

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

讯享网

实例2 用flex布局制作列表

实例3 用flex布局固定百分比布局（其中某一个固定）

实例4 底部footer固定在底部

2、grid布局

相关推荐