CSS分享flex布局，实现商品列表展示容器。（可自行扩展）

/* 商品列表容器样式 */
.goods-list {
    display: flex; /* 指定为flex布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-around; /* 水平方向上的子元素间隔均匀分布 */
    align-items: flex-start; /* 垂直方向上子元素顶部对齐 */
    padding: 10px; /* 容器内边距 */
}
 
/* 单个商品样式 */
.goods-item {
    flex: 0 1 auto; /* flex属性的简写，表示该商品可伸缩，且基于内容大小占用空间 */
    margin: 10px; /* 商品之间的间隔 */
    min-width: 150px; /* 最小宽度，确保在小屏幕下也能显示商品 */
}
 
/* 商品图片样式 */
.goods-img {
    width: 100%; /* 图片宽度为100%，占满容器宽度 */
    height: 200px; /* 图片高度固定为200px */
    object-fit: cover; /* 图片覆盖整个容器，保持宽高比 */
}
 
/* 商品名称和价格样式 */
.goods-info {
    padding: 10px; /* 内边距 */
    text-align: center; /* 文本居中对齐 */
}
 
/* 示例：商品名称 */
.goods-name {
    overflow: hidden; /* 超出文本部分隐藏 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    font-size: 16px; /* 字体大小 */
    color: #333; /* 字体颜色 */
}
 
/* 示例：商品价格 */
.goods-price {
    font-size: 18px; /* 字体大小 */
    color: #d00; /* 字体颜色 */
}

这个样例展示了如何使用flex布局来创建一个简单的商品列表容器，其中包含多个商品，每个商品包含图片和描述信息。同时，商品信息被适当地格式化，确保在不同屏幕大小下都能保持良好的显示效果。