html - 如何在非常小的窗口宽度上使用带有 flex-wrap 的中心元素而不截断它们?
问题描述
我在 Codepen 上有这段代码:代码
有没有人可以帮助我尝试修复它?我尝试将这样的元素居中:
然后,当窗口的宽度减小时,将元素一个在另一个之下。
我的第一个想法是结合 flex-wrap、justify-content 和 align-content 属性,如下所示:
flex-wrap: wrap;
justify-content: center;
align-content: center;
但问题是当窗口宽度非常小时,某些元素会被截断:
我的问题是:如何在不截断某些元素的情况下将元素的居中与 flex-wrap 结合起来?
谢谢您的帮助 :-)
解决方案
您正在手动将 设置height
为最大值。这就是截断你的元素的原因。
很难确切地说出您要做什么,但是看起来更改height: 350px;
为min-height: 350px;
仍然可以在桌面上为您提供尽可能多的间距,但在移动设备上让它伸展到正确的高度。
编辑 为了保持 350px 的高度,并且如果您可以在元素堆叠时在元素之间拥有灵活的空间量,请更改:
#container {
align-content: center;
}
至
.element {
align-self: center;
}
推荐阅读
- javascript - d3.js子选择无法检索输入值文本
- python-3.x - 永久写入字典
- r - 检查字符串是否包含在 R 数据框中列表列的每个向量中
- java - 使用 @OneToMany 映射 Ebean 模型本身
- excel - 在 Excel 中,如何返回与列中最大值关联的名称?
- android - 包含 400 个文档的 Firestore 写入批处理需要几分钟才能完成
- java - 我们如何确定我们是在 EC2 还是 Fargate 中运行?
- batch-file - 批处理文件时间
- node.js - etag 中的 W/ 是从哪里出现的?
- visual-studio - Visual Studio 在调试时不断跳转到当前语句