Flex 弹性布局自适应
Flex 布局通过 flex-wrap 和 flex: 1 1 基准值 实现自适应：空间不够自动换行，有余量自动伸展。一发 flex: 1，元素就会填满剩余空间，无需计算宽度。
组合 flex: 1 1 240px 表示“基准 240px，可增可缩”——桌面一行 3 个，窄屏自动换行成 1 个，全程零媒体查询。
- flex-wrap: wrap 是换行开关，默认不换
- flex: 1 1 基准值：基准宽度 + 自动伸缩，自适应神器
- gap 属性替代 margin，换行时间距自动均分
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; } .item { flex: 1 1 200px; /* 基准 200px：桌面挤 3 个，手机换行成 1 个 */ padding: 20px; text-align: center; border: 1px solid #d29922; border-radius: 10px; background: #fffaf0; } </style> </head> <body> <div class="box"> <div class="item">卡片 1</div> <div class="item">卡片 2</div> <div class="item">卡片 3</div> <div class="item">卡片 4</div> </div> </body> </html>
本节要点一行 flex: 1 1 基准px + flex-wrap 就能做出“无媒体查询的自适应卡片墙”。
