快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
生成一个电商商品列表页面，使用 CSS Flex 布局展示 6 个商品卡片。每个卡片包含图片、标题、价格和‘加入购物车’按钮。要求卡片在桌面端每行显示 3 个，在移动端每行显示 1 个，并保持间距均匀。- 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在做一个电商项目，正好用到了CSS Flex布局来实现商品列表页面，这里分享一下我的实战经验。Flex布局真的太适合这种需要灵活排列的场景了，特别是电商网站这种需要频繁调整布局的需求。
整体布局规划首先确定商品列表的容器使用flex布局，设置display:flex属性。为了让商品卡片能够自动换行，必须加上flex-wrap:wrap属性。这样当一行放不下时，卡片会自动换到下一行。
卡片间距控制使用justify-content属性来控制卡片之间的水平间距，我选择了space-around这个值，它会让卡片在容器中均匀分布，左右两侧也会保留适当的间距。同时用gap属性设置卡片之间的垂直和水平间距，这样就不需要额外写margin了。
卡片宽度设置桌面端每行显示3个卡片，我给每个卡片设置了约30%的宽度，这样三个卡片加上间距刚好能填满一行。这里要注意使用box-sizing:border-box，这样padding和border就不会影响卡片的总宽度。
响应式设计通过媒体查询@media，在移动端(屏幕宽度小于768px时)将卡片宽度设置为100%，这样每行就只显示一个卡片了。同时调整了一些间距，让移动端的显示效果更好。
卡片内部布局每个卡片内部也使用了flex布局，设置为flex-direction:column，这样图片、标题、价格和按钮就能垂直排列。按钮部分用margin-top:auto实现自动下对齐，这样不管卡片高度如何变化，按钮都会固定在底部。
图片处理商品图片设置了固定高度和width:100%，保持图片比例一致。用object-fit:cover确保图片始终填满容器，不会变形。
在实际开发中，我发现Flex布局有几点特别实用： - 不需要计算复杂的margin值就能实现均匀间距 - 调整布局时只需要修改几个属性，不需要重写大量CSS - 响应式适配特别简单，改个宽度就能适应不同屏幕 - 垂直居中变得异常简单，align-items:center就能搞定
遇到的主要问题是卡片高度不一致时会影响整体布局，解决方法是在卡片容器上设置align-items:stretch，让所有卡片高度保持一致。还有就是移动端和桌面端的间距需要分别调整，确保在不同设备上都有良好的视觉效果。
这次项目我是在InsCode(快马)平台上完成的，它的实时预览功能特别方便，可以立即看到CSS修改的效果。最棒的是可以直接部署上线，不用自己配置服务器环境，对于前端展示类项目来说真的很省心。整个开发过程很流畅，从编写代码到最终上线一气呵成，推荐有类似需求的同学试试。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
生成一个电商商品列表页面，使用 CSS Flex 布局展示 6 个商品卡片。每个卡片包含图片、标题、价格和‘加入购物车’按钮。要求卡片在桌面端每行显示 3 个，在移动端每行显示 1 个，并保持间距均匀。- 点击'项目生成'按钮，等待项目生成完整后预览效果
