用flex设计一个产品页面

好的，以下是一个简单的产品页面设计，使用了Flex布局：

HTML代码：

<div class="container">
  <div class="product-img">
    <img src="product-image.jpg" alt="Product Image">
  </div>
  <div class="product-details">
    <h1 class="product-name">Product Name</h1>
    <p class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae augue id elit aliquam laoreet. Sed vel nulla eget diam tristique tempor. Ut euismod ultrices lorem, sit amet tincidunt velit dapibus vel.</p>
    <div class="product-price">$99.99</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 50px;
}

.product-img {
  flex: 1;
  margin-right: 50px;
}

.product-img img {
  width: 100%;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 2rem;
  margin-bottom: 20px;
}

.product-description {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.product-price {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.add-to-cart {
  background-color: #FFC107;
  border: none;
  color: white;
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

这个页面有一个产品图片和产品详细信息，其中包括产品名称、描述、价格和“加入购物车”按钮。页面使用Flex布局，使其在不同大小的屏幕上都能很好地工作。