使用CSS Flexbox实现图片卡片自适应排列，需设置容器display: flex、flex-wrap: wrap和gap，子项通过flex-basis百分比控制宽度，结合flex-grow与flex-shrink实现响应式布局。
使用CSS Flexbox实现图片卡片自适应排列，关键在于合理设置容器的flex属性和子项的宽度控制。通过flex-basis结合百分比，可以轻松让卡片在不同屏幕尺寸下自动换行并均匀分布。
1. 容器设置display: flex与换行
要让图片卡片水平排列并在空间不足时自动换行，父容器需启用Flexbox并允许换行。
说明：- display: flex 启用弹性布局
- flex-wrap: wrap 允许子元素换行
- 可设置
gap统一卡片间距
示例代码：
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
2. 子项使用flex-basis百分比控制宽度
每个图片卡片设置flex-basis为百分比值，决定其基础宽度。浏览器会根据剩余空间自动调整。
立即学习“前端免费学习笔记（深入）”；
- 一行显示2个：flex-basis: 48%
- 一行显示3个：flex-basis: 32%
- 一行显示4个：flex-basis: 23%
配合flex-grow和flex-shrink实现自适应：
.card {
flex: 1 1 32%; /* flex-grow, flex-shrink, flex-basis */
max-width: 32%;
}
<p>img {
width: 100%;
height: auto;
border-radius: 8px;
}</p>3. 响应式断点优化显示
在小屏幕上调整flex-basis值，使布局更合理。
@media (max-width: 768px) {
.card {
flex: 1 1 48%;
max-width: 48%;
}
}
<p>@media (max-width: 480px) {
.card {
flex: 1 1 100%;
max-width: 100%;
}
}</p>这样在手机上每行只显示一张卡片，阅读体验更好。
基本上就这些。通过flex-basis设百分比，配合flex-wrap和响应式媒体查询，就能实现美观的图片卡片自适应布局。不复杂但容易忽略细节。
