Flex布局中元素主轴上平均分布 多余的向左对齐

news2024/12/25 9:34:12

content:父元素
content-item: 子元素

主轴上子元素平均分布
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
	  }
}

效果:

给父元素添加伪元素
.content:after {
	content: "";
	flex: auto;
}
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
	}
}

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1942352.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

万字长文之分库分表里无分库分表键如何查询【后端面试题 | 中间件 | 数据库 | MySQL | 分库分表 | 其他查询】

在很多业务里,分库分表键都是根据主要查询筛选出来的,那么不怎么重要的查询怎么解决呢? 比如电商场景下,订单都是按照买家ID来分库分表的,那么商家该怎么查找订单呢?或是买家找客服,客服要找到对…

ubuntu一些好用的开发工具及其配置

1 终端模糊搜索fzf https://github.com/junegunn/fzf 输入某命令,比如 conda ,按下ctrlR,会显示和该命令匹配的历史命令的列表 有了这个工具再也不用记忆太复杂的命令,只需要知道大概几个单词,输入即可搜索。 其搜索…

SSD基本架构与工作原理

SSD的核心由一个或多核心的CPU控制器、DRAM缓存以及多个NAND闪存芯片组成。CPU控制器负责管理所有读写操作,并通过DRAM缓存存储映射表等元数据,以加速寻址过程。 NAND闪存则是数据存储的实际介质,其组织结构从大到小依次为通道(包…

C++实现LRU缓存(新手入门详解)

LRU的概念 LRU(Least Recently Used,最近最少使用)是一种常用的缓存淘汰策略,主要目的是在缓存空间有限的情况下,优先淘汰那些最长时间没有被访问的数据项。LRU 策略的核心思想是: 缓存空间有限&#xff1…

航片转GIS数据自动化管线

近年来,计算机视觉领域的进步已显著改善了物体检测和分割任务。一种流行的方法是 YOLO(You Only Look Once)系列模型。YOLOv8 是 YOLO 架构的演进,兼具准确性和效率,是各种应用的绝佳选择,包括分割卫星航拍…

借助Python将txt文本内容导入到数据库

安装数据库并创建admin账号 #Create mariadb user CREATE USER admin% IDENTIFIED BY password; GRANT SELECT, INSERT, UPDATE, DELETE ON hosts_info.* TO admin%; FLUSH PRIVILEGES;创建库并创建数据表 #创建库 CREATE DATABASE hosts_info; #创建表 CREATE TABLE host_tm…

shell条件语句

一,条件测试 1 . test命令 测试表达式是否成立,若成立返回0,否则返回其他数值 1.1 格式 test 条件表达式 [ 条件表达式 ] 2 . 文件测试 2.1 格式 [ 操作符 文件或目录 ] 例 test -d /home/user 2.2 常用的测试操作符 -d:测试是否为目录(Directory)-e:测试目…

安装Ubuntu24.04服务器版本

Ubuntu系统安装 一.启动安装程序二.执行 Ubuntu Server 安装向导1.选择安装程序语言,通常选择「English」2.设置键盘布局,默认「English US」即可3.选择安装方式 三.配置网络1.按Tab键选择网络接口(例如 ens160),然后按…

== 与 equals 的区别

概念 它的作用是判断两个对象的地址是不是相等,判断两个对象是不是同一个对象基本数据类型比较的是值是否相等引用数据类型比较的是内存地址是否相等 equals() 概念 它的作用也是判断两个对象是否相等。但它一般有两种使用情况:情况1:类没有…

重复图片查找:巧用Python和OpenCV进行图像哈希与汉明距离检测以从海量图片中找出重复图片

重复图片查找:巧用Python和OpenCV进行图像哈希与汉明距离检测以从海量图片中找出重复图片 1. 导言2. 环境准备3. 图像哈希(pHash)原理4. 汉明距离原理5. 代码实现导入必要的库图像哈希计算函数汉明距离计算函数查找重复图片函数示例使用 在处…

昇思25天学习打卡营第14天|计算机视觉

昇思25天学习打卡营第14天 文章目录 昇思25天学习打卡营第14天FCN图像语义分割语义分割模型简介网络特点数据处理数据预处理数据加载训练集可视化 网络构建网络流程 训练准备导入VGG-16部分预训练权重损失函数自定义评价指标 Metrics 模型训练模型评估模型推理总结引用 打卡记录…

Python机器学习入门:从理论到实践

文章目录 前言一、机器学习是什么?二、机器学习基本流程三、使用Python进行机器学习1.数据读取2.数据规范化3. 数据降维(主成分分析)4. 机器学习模型的选择5. 线性回归模型的实现6. 可视化结果 总结 前言 机器学习是人工智能的一个重要分支&…

RabbitMQ的学习和模拟实现|muduo库的介绍和使用

muduo库 项目仓库:https://github.com/ffengc/HareMQ muduo库 muduo库是什么快速上手搭建服务端快速上手搭建客户端上面搭建的服务端-客户端通信还有什么问题?muduo库中的protobuf基于muduo库中的protobuf协议实现一个服务器 muduo库是什么 Muduo由陈硕大佬开…

无人机之摄影构图指南

一、三分法构图 将画面分为三等分,水平线或地平线通常放在1/3处,使得画面看起来更加舒适。主体放在九宫格四个交点(视觉中心)上,突出视觉中心。 二、对称式构图 将画面左右或上下对等分割,形成呼应&…

HTML:lang属性作用

lang作用 用法常见语言代码优点示例结构效果说明分析HTML 基础结构导航栏内容部分总结 扩展 用法 HTML 文档级别: 在 <html> 标签上使用 lang 属性&#xff0c;指定整个文档的语言。 <!DOCTYPE html> <html lang"en"> <head><meta charse…

(C++) 文件读写基础

文章目录 &#x1f5c2;️前言&#x1f4c4;ref&#x1f4c4;访问标记&#x1f5c3;️流打开模式类型 &#x1f5c2;️Code&#x1f4c4;demo&#x1f4c4;分点讲解&#x1f5c3;️打开/关闭&#x1f5c3;️写&#x1f5c3;️读&#x1f5c3;️状态函数 &#x1f5c2;️END&…

javascript 的执行上下文与作用域

目录 1. 初步了解 上下文&#xff08;context&#xff09;2. 全局上下文(global context)3. 上下文栈 (context stack)4. 作用域链( scope chain)5. 作用域(scope)6. 作用域链增强 1. 初步了解 上下文&#xff08;context&#xff09; 上下文(context) 全称 执行上下文 (execut…

linux中RocketMQ安装(单机版)及springboot中的使用

文章目录 一、安装1.1、下载RocketMQ1.2、将下载包上传到linux中&#xff0c;然后解压1.3、修改runserver.sh的jvm参数大小&#xff08;根据自己服务器配置来修改&#xff09;1.4、启动mqnamesrv &#xff08;类似于注册中心&#xff09;1.5、修改runbroker.sh的jvm参数大小&am…

【Linux】进程信号 --- 信号处理

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

el-table列的显示与隐藏

需求&#xff1a;实现 表字段的显示与隐藏。效果图 代码实现 写在前面 首先 我部分字段有自定义的排序逻辑&#xff0c;和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column 。然后 我需要默认展示一部分字段&#xff0c;并且 当表无数据时 提示不能 显示隐藏 …