flex的样式使用

元素与主轴的对齐方式

/* 定义flex容器 */
	display: flex;
	/* 
	设置容器内部元素的排列方向
	 row:定义排列方向，从左到右
	 row-reverse:从右到左
	 column:从上到下
	 column-reverse:从下到上
	 */
	flex-direction: row-reverse;
	/* 
	 nowrap:不换行
	 wrap:换行
	 */
	flex-wrap: nowrap;
	/* 
	 设置元素在主轴上的对齐方式
	 flex-start:（默认）左对齐 向上
	 flex-enf:右对齐 向下
	 center:居中对齐
	 space-between: 两端对齐，元素之间平均等分剩余空白间隙部分
	 space-around: 元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1:2
	 */
	justify-content: space-between;
	/* 
	 设置容器中元素在交叉轴上的对齐方式
	 stretch:（默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
	 flex-start:在交叉轴上向起点位置（向上或向左）对齐
	 flex-end:在交叉轴上向起点位置（向下或向右）对齐
	 center:居中对齐
	 baseline:保证元素中的文字在同一条基准线，也就是每个文字都在同一水平线上
	 */
	align-items: center;
	/* 
	 当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
	 center:居中
	 flex-start：向左对齐
	 flex-end：向右对齐
	 stretch：当宽度width没有设置的时候，轴线可以被拉伸
	 space-between:两端对齐，元素之间的空白等比切分
	 space-around:轴线两边的空白等比切分
	 */
	align-content: center;
	/*
	 重写容器中元素在交叉轴上的对齐方式
	 auto:默认，表示继承父级元素的align-items属性
	 stretch:（默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
	 flex-start:在交叉轴上向起点位置（向上或向左）对齐
	 flex-end:在交叉轴上向起点位置（向下或向右）对齐
	 center:居中对齐
	 baseline:保证元素中的文字在同一条基准线，也就是每个文字都在同一水平线上
	 */
	align-self: auto;
	/* order:用于设置flex容器内部的每个元素的排列顺序，默认是0；排序规则：从小到大
	 flex-grow:用于设置元素的放大比例，默认为0，则不放大，使元素均等分填充空白多余的部分
	 flex-shrink:用于定义属性的缩放比例，默认为1，为0的时候，不进行缩放
	 flex-basis：设置元素固定或自动空间的占比
	 */
	 order: 1;
	flex-grow: 1;
	flex-shrink: 1;
	object-fit: cover; /*等比例显示图片*/
	/* 处理最后一行图片的问题
		将大的div设置为flex，然后在最后面添加一个div元素，使其占据的部分大于其它部分
	 */
	#imt::after{
        content: '';
        flex-grow: 9;
    }
    vertical-align: top; 
			/* 取出图片下方的留白 */

uni-app开发工具实例代码如下：

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

<script>
</script>

<style>
.container{
	/* 定义flex容器 */
	display: flex;
	/* 
	对齐方式的代码在这里写即可，如下句代码
	 */
	flex-direction: row-reverse;

	
	height: 750upx;
	background-color: #98F5FF;
}
.txt{
		font-size: 30px;
		width: 150upx;
		height: 150upx;
	}
.red{
	background-color: red;
}
.green{
	background-color: green;
}
.blue{
	background-color: blue;
}
</style>