vue——布局（flex、gride）_wy313622821_vue 布局

网络 02-07 6209

前端布局发展史：初代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 }