Flexbox布局是CSS3推出的弹性盒布局模型，通过父容器设置display为flex即可开启，能够灵活控制子元素的排列方向、对齐方式、空间分配，非常适合用来构建需要适配多屏幕的卡片组件。无论是圆形卡片还是方形卡片，都可以基于Flexbox的基础属性实现响应式效果。
Flexbox布局核心属性说明
要实现响应式卡片布局，首先需要掌握几个常用的Flexbox属性，这些属性主要设置在卡片的父容器上：
- flex-direction：设置子元素的排列方向，默认值为row，即水平排列，也可以设置为column实现垂直排列。
- flex-wrap：设置子元素是否换行，默认值为nowrap不换行，设置为wrap后子元素超出父容器宽度会自动换行，这是实现响应式的关键属性。
- justify-content：设置子元素在主轴上的对齐方式，常用值有center、space-between、space-around等，用来控制卡片之间的水平间距。
- align-items：设置子元素在交叉轴上的对齐方式，常用值有center、flex-start等，用来控制卡片的垂直对齐效果。
- gap：设置子元素之间的间距，同时控制水平和垂直方向的间距，比单独用margin控制更方便。
方形卡片的响应式实现
方形卡片的实现核心是保持宽高一致，同时结合Flexbox的换行属性适配不同屏幕。首先定义卡片的父容器样式，开启Flexbox并设置换行与间距：
/* 卡片父容器样式 */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* 方形卡片基础样式 */
.square-card {
/* 通过flex属性设置卡片的基础宽度，适配不同屏幕 */
flex: 0 0 calc(25% - 15px);
aspect-ratio: 1 / 1; /* 保持宽高1:1，实现方形效果 */
background-color: #f5f5f5;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
box-sizing: border-box;
transition: transform 0.3s ease;
}
.square-card:hover {
transform: translateY(-5px);
}
/* 卡片内部标题样式 */
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
/* 卡片内部描述样式 */
.card-desc {
font-size: 14px;
color: #666;
text-align: center;
}
接下来是方形卡片的HTML结构，每个卡片作为父容器的直接子元素：
<div class="card-container">
<div class="square-card">
<div class="card-title">卡片1</div>
<div class="card-desc">这是第一个方形卡片内容</div>
</div>
<div class="square-card">
<div class="card-title">卡片2</div>
<div class="card-desc">这是第二个方形卡片内容</div>
</div>
<div class="square-card">
<div class="card-title">卡片3</div>
<div class="card-desc">这是第三个方形卡片内容</div>
</div>
<div class="square-card">
<div class="card-title">卡片4</div>
<div class="card-desc">这是第四个方形卡片内容</div>
</div>
<div class="square-card">
<div class="card-title">卡片5</div>
<div class="card-desc">这是第五个方形卡片内容</div>
</div>
</div>
上述代码中，aspect-ratio: 1 / 1是CSS新增的属性，直接设置元素宽高比为1:1，无需再通过padding-bottom的技巧实现方形效果。flex属性设置为0 0 calc(25% - 15px)，表示卡片不伸缩不收缩，基础宽度为父容器宽度的25%减去间隙的影响，在大屏幕下一行显示4个卡片，当屏幕宽度缩小到一定程度，calc计算后的宽度超过父容器宽度，结合flex-wrap: wrap属性，卡片会自动换行，实现响应式效果。
圆形卡片的响应式实现
圆形卡片的实现只需要在方形卡片的基础上调整border-radius属性即可，其他Flexbox相关属性可以复用。首先修改卡片样式：
/* 圆形卡片样式，继承方形卡片的基础属性 */
.circle-card {
flex: 0 0 calc(20% - 16px);
aspect-ratio: 1 / 1;
background-color: #e8f4ff;
border-radius: 50%; /* 设置圆角为50%，实现圆形效果 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
box-sizing: border-box;
transition: transform 0.3s ease;
}
.circle-card:hover {
transform: scale(1.05);
}
/* 圆形卡片内部图标样式 */
.card-icon {
width: 40px;
height: 40px;
margin-bottom: 10px;
background-color: #4a90e2;
border-radius: 50%;
}
/* 圆形卡片内部文字样式 */
.circle-card .card-title {
font-size: 16px;
}
对应的HTML结构和方形卡片类似，只是类名改为circle-card：
<div class="card-container">
<div class="circle-card">
<div class="card-icon"></div>
<div class="card-title">功能1</div>
</div>
<div class="circle-card">
<div class="card-icon"></div>
<div class="card-title">功能2</div>
</div>
<div class="circle-card">
<div class="card-icon"></div>
<div class="card-title">功能3</div>
</div>
<div class="circle-card">
<div class="card-icon"></div>
<div class="card-title">功能4</div>
</div>
<div class="circle-card">
<div class="card-icon"></div>
<div class="card-title">功能5</div>
</div>
</div>
圆形卡片将border-radius设置为50%即可让方形元素变为圆形，同样通过flex属性设置基础宽度，结合flex-wrap实现响应式。这里设置每个卡片基础宽度为20%减去间隙，大屏幕下一行显示5个圆形卡片，屏幕缩小时自动换行。
响应式适配优化
如果需要在不同屏幕宽度下调整每行显示的卡片数量，可以结合媒体查询修改flex属性的计算方式：
/* 屏幕宽度小于768px时，方形卡片每行显示2个 */
@media (max-width: 768px) {
.square-card {
flex: 0 0 calc(50% - 10px);
}
.circle-card {
flex: 0 0 calc(33.33% - 13.33px);
}
}
/* 屏幕宽度小于480px时，方形卡片每行显示1个 */
@media (max-width: 480px) {
.square-card {
flex: 0 0 100%;
}
.circle-card {
flex: 0 0 calc(50% - 10px);
}
}
通过上述媒体查询，方形卡片在平板设备上一行显示2个，在手机上一行显示1个；圆形卡片在平板上一行显示3个，在手机上一行显示2个，进一步提升布局的适配性。
常见问题说明
在实现过程中可能会遇到几个常见问题：
- 如果卡片内容过多导致高度变化，方形效果被破坏，可以给卡片设置固定高度或者继续使用aspect-ratio属性，同时设置overflow: hidden隐藏超出内容。
- 如果卡片之间的间距不一致，优先使用gap属性控制，避免单独给卡片设置margin导致最后一个卡片的margin-right多余。
- 圆形卡片如果是长方形内容，可能会出现内容被截断的情况，可以调整内边距或者缩小字体大小，保证内容在圆形区域内正常显示。