Flex布局

最新推荐文章于 2025-06-21 13:12:31 发布

原创最新推荐文章于 2025-06-21 13:12:31 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了Vue中使用Flex布局的方法，包括容器属性如display、flex-direction、flex-wrap等，以及项目属性如order、flex-grow、flex-shrink等。通过实例展示了如何设置元素的排列顺序、放大缩小比例及对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中代码：

<template>
	<view class="container">
		
		<view class="green txt">
			A
		</view>
		
		<view class="red txt">
			B
		</view>
		
		<view class="blue txt">
			C
		</view>
		
	</view>
</template>

CSS样式：

.container {
	/* 定义flex容器 */
	display: flex;



	/* 
	    设置容器内部元素的排列方向 
	    row: 定义排列方向 从左到右
	    row-reverse: 从右到左
	    column: 从上到下
	    column-reverse: 从下到上
	*/
	flex-direction: column;



    /**
		nowrap: 不换行
		wrap: 换行
		wrap-reverse: 逆向换行
	*/
	flex-wrap: wrap;


    
    /*
		设置元素在主轴上的对其方式
		flex-start: (默认)左对齐 或者 向上对齐
		flex-end: 右对齐	或者 向下对齐
		center: 居中对齐
		space-between: 两端对齐，元素之间平均等分剩余空白间隙部分
		space-around: 元素两边平均等分剩余空白间隙部分，最左（上）或最右（下）和元素之间距离是1:2
	 */
	justify-content: space-between;



    /* 
		设置容器中元素在交叉轴上的对齐方式
		stretch：（默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
		flex-start: 在交叉轴上向起点位置（向上/向左）对齐
		flex-end: 在交叉轴上向结束位置（向下/向右）对齐
		center: 居中对齐
		baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
	 */
	align-items: baseline;



    /* 
		当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
		center：居中
		flex-start: 向左对齐
		flex-end: 向右对齐
		stretch: 当宽度width没有设置的时候，轴线可以被拉伸
		space-between: 两端对齐，元素之间的空白等比切分
		space-around: 轴线两边的空白等比切分
	 */
	align-content: space-around;
}





/* 
	order: 用于设置flex容器内部的每个元素的排列顺序，默认是0
		   排序规则，由小到大
	flex-grow: 用于设置元素的放大比例，默认为0
			   如果为0，则不放大
	flex-shrink: 用于定义属性的缩放比例，默认为1
				 设置为0的时候，不进行缩放
    flex-basis: 不需要有其他元素的影响，可以直接设置该元素本身的放大和缩小
 */
.red {
	background-color: #FF0000;
	/* order: 0; */
	/* flex-grow: 2; */
	flex-shrink: 0;
	flex-basis: 150upx;
}

.green {
	background-color: #008000;
	/* order: 2; */
	/* flex-grow: 1; */
	flex-shrink: 0;
}



/* 
		重写容器中元素在交叉轴上的对齐方式
		auto: 默认，表示继承父级元素的align-items属性
		stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
		flex-start: 在交叉轴上向起点位置（向上/向左）对齐
		flex-end: 在交叉轴上向结束位置（向下/向右）对齐
		center: 居中对齐
		baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
	 */
	
.blue {
	background-color: blue;
	/* order: 1; */
	/* flex-grow: 1; */
	flex-shrink: 0;
    align-self: stretch;
}