当前位置: 首页 > news >正文

flex布局换行后出现间隙问题

问题:换行后,行间出现空白间隔,如果没有设置父容器的高度,不会出现这个问题,父容器高度会随子项增多,而变大。

.content {height: 8rem;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;.item {width: 125px;height:200px;}
}

解决:父容器添加 align-content: flex-start;

说明:
align-content是Flex布局中用于控制多行子项在交叉轴上的对齐方式的属性。它仅在有多行子项时才会生效,如果子项只有一行,则align-content属性不会产生任何效果。(生效条件:display:flex;flex-direction:row;flex-wrap:wrap;)

常见的 align-content 取值包括:

flex-start:多行子项在交叉轴的起始端对齐。
flex-end:多行子项在交叉轴的末端对齐。
center:多行子项在交叉轴上居中对齐。
space-between:多行子项均匀分布在交叉轴上,两端无空隙。
space-around:多行子项均匀分布在交叉轴上,两端留有空隙。
**stretch:多行子项被拉伸以填满交叉轴上的可用空间。默认**

补充:

align-self 是Flex布局中用于单个子项控制其在交叉轴上的对齐方式的属性。通过为单个子项设置 align-self 属性,可以覆盖容器的 align-items 属性,从而针对该子项进行个别的对齐方式设置。

align-self 的取值与 align-items 的取值类似,常见的取值有:

auto:子项的对齐方式将继承容器的 align-items 属性。
flex-start:子项在交叉轴的起始端对齐。
flex-end:子项在交叉轴的末端对齐。
center:子项在交叉轴上居中对齐。
baseline:子项基于基线对齐。
stretch:子项被拉伸以填满交叉轴的高度。

问题解决过程中主要参考了
https://blog.csdn.net/caseywei/article/details/109075874

http://www.lryc.cn/news/264194.html

相关文章:

  • RPC(3):HttpClient实现RPC之GET请求
  • PHP函数里面写JQ CSS HTML的写法案例
  • 爬虫工作量由小到大的思维转变---<第十八章 Scrapy请求处理与返回策略>
  • 【免费直播今天下午!】见微知著 唤醒视觉:机器视觉与成像应用解决方案,诚邀您的参与!
  • 智商均值回归
  • ChatGPT助力Excel数据分析:让你的工作事半功倍!
  • 多表插入、删除操作(批量)——后端
  • Java操作Word修订功能:启用、接受、拒绝、获取修订
  • 什么是数据仪表板?数据可视化仪表盘怎么制作?
  • HiveServer2
  • YOLOv8改进 | 2023注意力篇 | HAttention(HAT)超分辨率重建助力小目标检测 (全网首发)
  • IDEA Community html文件里的script标签没有syntax highlighting的解决方案
  • 如何获取旧版 macOS
  • vp与vs联合开发-Ini配置文件
  • Ethernet/IP 之IO 连接简要记录
  • 【python基础】-- yarn add 添加依赖的各种类型
  • @Autowired搭配@interface注解实现策略模式
  • Linux CentOS下Composer简单使用
  • Mysql-干净卸载教程
  • 纵横字谜的答案 Crossword Answers
  • cpp_04_类_对象_this指针_常对象_常(成员)函数
  • AttributeError: module ‘_winapi‘ has no attribute ‘SYNCHRONIZE‘解决方案
  • 多媒体互动橱窗设计如何改变内容展示形式?
  • flutter自定义地图Marker完美展示图片
  • no module named cv2 、numpy 、xxx超全解决方案
  • BSWM 模式管理(二)ESH
  • mac电脑安装虚拟机教程
  • 手动配置 kafka 用户密码,认证方式等的方式
  • 机器学习 深度学习 神经网络
  • VCG 获取某个顶点的邻接顶点