flex布局自动换行并对齐

最新推荐文章于 2024-07-28 22:02:05 发布

Mr_查

最新推荐文章于 2024-07-28 22:02:05 发布

阅读量4.6k

点赞数

分类专栏： css flex 文章标签： css

本文链接：https://blog.csdn.net/Hellow_Mr/article/details/106540889

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

flex

1 篇文章 0 订阅

订阅专栏

HTML代码

			<view class="con">
				<view class="one">
					<view class="">237</view>
					<view class="">浏览次数</view>
				</view>
				<view class="one">
					<view class="">237</view>
					<view class="">浏览次数</view>
				</view>
				<view class="one">
					<view class="">237</view>
					<view class="">浏览次数</view>
				</view>
				<view class="one">
					<view class="">237</view>
					<view class="">浏览次数</view>
				</view>
				<view class="one">
					<view class="">237</view>
					<view class="">浏览次数</view>
				</view>
			</view>

css代码

			.con{
				padding-bottom: 30rpx;
				display: flex;
				flex-wrap: wrap;//自动换行
				justify-content: space-between;//两端对齐
                //伪类填充
				&::after{
					content: '';
					flex: 1;
				}
				.one{
					background-color: #F6FAFE;
					padding: 33rpx 26rpx;
					width: 226rpx;
					margin-top: 12rpx;
					view{
						&:first-child{
							font-size: 32rpx;
							color: #313249;
							font-weight: bold;
							line-height: 45rpx;
						}
						&:last-child{
							font-size: 26rpx;
							color: #878794;
							line-height: 37rpx;
						}
					}
				}
			}