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

使用此

#wrapper {
	width: 960px;  /*remove this for small screen. if you use fixed width it can not responsive in smaller screen see media query below*/
	margin: auto;
}

.products {
        /*or use max-width*/
	max-width: 960px;
	margin-top: 80px;
	margin-bottom: 80px;
	display: flex;
        /*add this*/
        flex-wrap: wrap;
	justify-content: space-between;
}

.product-item {
	width: 300px;
}

@media(max-width: 960px) {
    #wrapper {
        width: auto;
    }
}

Answer 2

问题在于您对包装器和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>

如何使Flexbox响应迅速？

2 个答案: