首页 > 其他分享 >处理flex布局

处理flex布局

时间:2023-12-02 23:55:06浏览次数:29  
标签:flex 处理 margin 布局 book wrap font 30rpx

点击查看代码
	<view class="recommend-view">
		<view class="title-view">
			热门推荐
		</view>
		<view class="book-list">
			<view class="book-item" v-for="item in list" :key="item.id" @click="listJump(item.anid)">
				<image class="book-img" :src="item.coverpic"></image>
				<view class="book-text ell2">{{item.title}}</view>
			</view>

		</view>
	</view>
	
	
	
	
	————————————————————
	.recommend-view {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		padding-right: 0;

		.title-view {
			font-size: 20px;
			font-weight: 800;
		}

		.book-list {
			display: flex;
			flex-wrap: wrap;

			.book-item {
				width: 210rpx;
				margin-top: 30rpx;
				margin-right: 30rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.book-img {
					width: 180rpx;
					height: 252rpx;
					margin-bottom: 10rpx;
					border: 1px solid rgb(107, 107, 109);
					border-radius: 20rpx;

				}

				.book-text {
					font-size: 28rpx;
				}
			}
		}
	}

标签:flex,处理,margin,布局,book,wrap,font,30rpx
From: https://www.cnblogs.com/zsnhweb/p/17872499.html

相关文章

  • 【JavaSE】异常(异常体系、异常处理方式、自定义异常)
    异常介绍异常体系一定要能阐述异常的体系结构!异常类的祖先类:Throwable所有的异常都是一个类,如果不清楚可以在API帮助文档查询运行时异常:编译时没有错误,运行时可能会出错,通常是代码不严谨导致的编译时异常(不包含语法错误):主要起提醒作用,需要在运行之前给出解决方式异常处理......
  • 需求:将多页PDF整合到一张A4纸上_PDF转JPG_处理图片的wand模块如何安装
    思路:1.将PDF按照每页拆分成单个的PDF2.将每页小的PDF转换成JPG3.将图片写入到excel中4.调用excel生成PDF实现:1.将PDF按照每页拆分成单个的PDF:  2.将单个PDF文件处理成JPG格式图片:安装wand模块报错解决办法:  报错:Python安装wand模块出错  ......
  • 程序处理中的 Exceptions 和 Assertions 各自的使用场合
    错误处理:Exceptionsvs.Assertions引言在计算机软件开发中,错误处理是至关重要的一部分。它涉及到在程序执行过程中发生错误时采取的措施。在错误处理的上下文中,两个常见的概念是“异常”(Exceptions)和“断言”(Assertions)。它们都是用于处理程序中出现问题的工具,但在设计和应用上......
  • 程序处理中 Exceptions 和 Messages 的区别和各自的使用场合
    在计算机软件工程中,异常处理(exceptions)和消息传递(messages)是两种常见的处理错误情况的方式。它们各自有着不同的特点和适用场合,下面将对它们进行详细介绍,并通过实例来说明它们的应用。异常处理(exceptions):异常处理是一种在程序执行过程中,出现错误时跳出正常流程,进入专门的错误处......
  • 什么是前端 Web 应用响应式页面布局里的 Breakpoint 概念
    在Web前端开发中,响应式设计是一个非常重要的概念,它允许网页UI根据不同的设备屏幕大小进行适当的调整以优化用户体验。在这种设计中,breakpoint是一个关键的概念。我们可以把breakpoint理解为屏幕宽度的一种临界点,当屏幕宽度达到这个点时,我们会调整页面布局以适应这个新的屏......
  • Grid 拖拽布局实现
    最近有个需求需要实现自定义首页布局,需要将屏幕按照6列4行进行等分成多个格子,然后将组件可拖拽对应格子进行渲染展示。示例对比一些已有的插件,发现想要实现产品的交互效果,没有现成可用的。本身功能并不是太过复杂,于是决定自己基于vue手撸一个简易的Grid拖拽布局。完整......
  • 预处理组合数
    预处理组合数基本做法针对大多数仅仅是利用组合数求解问题的题目运用递推法打表,不仅方便,而且可以稳稳地控制复杂度,对于需要多次引用组合数的题目效果极佳:基于组合数公理性质:\[C^m_n=C^{n-m}_n\]推得:\[C^m_n=C^{m-1}_{n-1}+C^m_{n-1}\]由这个递推公式就可以熟练的写出组合......
  • 配备四核应用处理器和GPU(XCZU1EG-2SFVA625I、XCZU1EG-2SFVA625E、XCZU1EG-1SFVA625I)Zy
    详情Zynq™UltraScale+™MPSoC器件不仅提供64位处理器可扩展性,同时还将实时控制与软硬件引擎相结合,支持图形、视频、波形与数据包处理。置于包含通用实时处理器和可编程逻辑的平台上,三个不同变体包括双核应用处理器(CG)器件、四核应用处理器和GPU(EG)器件、以及视频编......
  • Spring 中的 URL 处理工具类 UriComponentsBuilder
    UriComponentsBuilder是SpringFramework中的一个用于构建URI(UniformResourceIdentifier)和URL(UniformResourceLocator)的实用程序类。它提供了一种简单的方式来构建包含各种部分(如协议、主机、路径、查询参数等)的URI和URL,并支持对这些部分进行修改、替换和合并等操作。以下是......
  • 雷池 WAF(SafeLine)异常处理:Web需要绑定动态口令,系统异常崩溃
    说明问题发生在2023年12月1日,突然发现安装的雷池WAFWeb需要重新绑定动态口令,但扫描二维码无法绑定。当即检查防护站点服务正常,PVEShell访问正常。查看Issues·chaitin/SafeLine·GitHub,发现已经有人提交了Bug。[Bug]从3.13开始雷池tengine就疯狂报错了,完全不......