html - 如何让 Flexbox 响应？

Question

我正在尝试制作响应式布局，但出于某种原因，flexbox 仅在桌面上运行良好。这是我的 HTML 和 CSS:

#wrapper {
   width: 960px;
   margin: auto;
}

.products {
   width: 960px;
   margin-top: 80px;
   margin-bottom: 80px;
   display: flex;
   justify-content: space-between;
}

.product-item {
   width: 300px;
}

<section id="wrapper">
    <article class="products">
	<div class="product-item">
	    <p>FLOWER arrangements</p>
	</div>
	<div class="product-item">
	    <p>FLOWER bouquets</p>
	</div>
	<div class="product-item">
	    <p>FLOWER baskets</p>
	</div>
    </article>
</section>

任何人都可以阐明如何使其具有响应性吗？

Answer 1

问题是您应用到包装器和 flex 容器的硬宽度，这使得它在小屏幕上太宽了。在包装器上设置一个 max-width 以使其灵活:

#wrapper {
  margin: auto;
  max-width:960px;
}

.products {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  margin-bottom: 80px;
}

.product-item {
  background-color: gray;
}

<section id="wrapper">
  <article class="products">
    <div class="product-item">
      <p>FLOWER arrangements</p>
    </div>

    <div class="product-item">
      <p>FLOWER bouquets</p>
    </div>

    <div class="product-item">
      <p>FLOWER baskets</p>
    </div>
  </article>
</section>