如何在 flexbox 中将 3 个浮动 div 变成 2 个浮动 div？答案

【问题标题】：How to make 3 floating divs into 2 floating divs inside a flexbox?如何在 flexbox 中将 3 个浮动 div 变成 2 个浮动 div？
【发布时间】：2021-06-27 14:16:48
【问题描述】：

我正在制作一个电子商务网站。在全屏视图中，并排显示 3 个产品，即 3 个产品图块，即 3 个 div。下面是相关的css代码。

.single-product{ 
     width: 33%;
     float: left;
     margin: 2px 64px;
     background: white;
     margin-bottom: 20px;
   
} /* For each individual product */

.products-section{
     display:flex;
     flex-direction: row;
     justify-content: space-evenly;
     padding-top: 20px;
} /* For the whole product section */

当我切换到移动视图时，相同的 3 个产品以较小的产品图块显示在屏幕上。现在，当屏幕处于移动视图时，我希望页面仅显示 2 个产品图块而不是 3 个。我如何在 css 中做到这一点？

【问题讨论】：

请参阅stackoverflow.com/help/how-to-ask。您需要显示您的标记。把它和你的 CSS 放在一个演示 sn-p 中。
带有媒体查询
floating divs inside a flexbox -> 让我畏缩......如果你已经使用了 flexbox，为什么还要使用过时的 float hack？

标签： html css flexbox responsive-design responsive

【解决方案1】：

可以使用media查询来完成：

body>div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body>div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body>div>div:nth-child(even) {
  background: lightgreen;
}

body>div>div:nth-child(odd) {
  background: lightpink;
}

@media screen and (max-width:600px) {
  body>div>div {
    flex-grow: 1;
    width: 50%;
    height: 100px;
  }

}

<div >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

【讨论】：