vue——布局（flex、gride）

前端布局发展史：初代table布局CSS+div布局Flex布局（移动端较友好）grid布局（2020年）Flex布局：实例1用flex布局制作导航栏flex:1表示下面的综合：flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小flex-basis : 0; // 这意味着div没有这样的

wy313622821

16217人浏览 · 2021-09-03 12:03:17

wy313622821 · 2021-09-03 12:03:17 发布

前端布局发展史：

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