使用Flexbox构建小米商城页面：HTML+CSS示例

以下是一个使用flex方法实现的简单的小米商城页面的示例：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>小米商城</title>\n <style>\n body {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-family: Arial, sans-serif;\n }\n \n header {\n background-color: #333;\n width: 100%;\n padding: 20px;\n color: #fff;\n display: flex;\n justify-content: space-between;\n }\n \n main {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n footer {\n background-color: #333;\n width: 100%;\n padding: 20px;\n color: #fff;\n display: flex;\n justify-content: center;\n }\n \n .product {\n border: 1px solid #ccc;\n padding: 20px;\n margin: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n \n .product img {\n width: 200px;\n height: 200px;\n margin-bottom: 10px;\n }\n \n .product h3 {\n margin: 0;\n font-size: 18px;\n }\n \n .product p {\n margin: 10px 0;\n }\n </style>\n</head>\n<body>\n <header>\n <h1>小米商城</h1>\n <nav>\n <a href="#">首页</a>\n <a href="#">产品</a>\n <a href="#">关于</a>\n <a href="#">联系</a>\n </nav>\n </header>\n <main>\n <div class="product">\n <img src="product1.jpg" alt="Product 1">\n <h3>产品1</h3>\n <p>描述1</p>\n <button>购买</button>\n </div>\n <div class="product">\n <img src="product2.jpg" alt="Product 2">\n <h3>产品2</h3>\n <p>描述2</p>\n <button>购买</button>\n </div>\n <div class="product">\n <img src="product3.jpg" alt="Product 3">\n <h3>产品3</h3>\n <p>描述3</p>\n <button>购买</button>\n </div>\n </main>\n <footer>\n © 2021 小米商城\n </footer>\n</body>\n</html>\n\n\n在这个例子中，我们使用了flex布局来实现页面的整体布局。body元素被设置为display: flex;，并且使用flex-direction: column;将子元素垂直排列。header和footer元素使用display: flex;和justify-content: space-between;来使其中的内容水平排列。\n\nmain元素使用flex-grow: 1;来占据剩余的空间，并且子元素使用display: flex;和align-items: center; justify-content: center;来使其中的内容垂直和水平居中。\n\n每个产品使用.product类来设置样式，包括边框、内边距、外边距等。产品图片使用width和height来设置大小，并且使用margin-bottom来设置下边距。\n\n最后，使用简单的HTML标签来创建导航、产品和页脚的内容。