问Flexbox:在移动设备上将2列折叠为单列，但重新排列元素
EN

Stack Overflow用户

提问于 2020-09-06 22:05:29

回答 1查看 295关注 0票数 0

我正在努力理解flexbox (双关语)对我的产品页面的完全灵活性。我的桌面设置如下: flex容器中有两列div。左列有一个包含产品图像的div (调用DIV 1)。右列div中有两个div，标题/描述DIV (调用DIV2)和变体样本(大小和颜色输入) div (调用DIV3)。对于移动端，我想要一个单独的列，我可以使用flex-direction:column来实现，但是排序是我想要调整的。基本上，左列在顶部，然后右列在下面，因此排序是DIV1、DIV2和DIV3。但是，我希望将DIV2和DIV3分开，这样顺序是DIV2、DIV1，然后是DIV3。

我目前的解决方案我不知道这是否是好的做法，但我已经创建了第二个版本的DIV2，并将其放在左栏中，然后我隐藏起来，直到移动设备开始工作，我使它可见，然后隐藏右栏版本的DIV2。

我想知道flexbox是否是一个完整的解决方案，我也想知道我在移动和桌面上隐藏和取消隐藏重复元素的做法是不是很糟糕，因为这是我使用flexbox时唯一能想到的解决方案。我的网站实现了这一点，请访问www.printperry.com/home/product-page/index.php

html

css

flexbox

腾讯特效SDK 2.5折起

美颜基础/原子能力套餐低至1500元/月，提供丰富的美化能力，支持全平台集成

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-07 06:35:46

在这里，flexbox可以为你做的事情已经达到了极限，虽然你可以在每个flex项目上使用order重新安排事情，但这对你没有太大帮助，因为你想在移动设备上重新排序的东西(产品信息)嵌套在另一个div中，目的是在桌面视图中显示堆叠在照片旁边的内容。在这种情况下，更适合使用display:grid。您可以将其设置为桌面的2列3行，并让图像div跨3行。然后再次更改移动视图的布局，如下所示；

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  display: grid;
  /*set up a grid layout, 2 by 3 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3 1fr);
}

.product-images {
/* make image div span all 3 rows starting from the 1st */
  grid-row: 1 / span 3;
}


/*mobile styles*/

@media screen and (max-width: 940px) {
  .container {
  /*single column layout*/
    grid-template-columns: 1fr;
  }
  
  .product-description {
  /*move prod description to first row of grid*/
    grid-row-start: 1;
  }
  
  .product-images {
   /*move images to second row, everything else follows under neath*/
    grid-row-start: 2;
  }
 
}

<div class="container">
  <div class="product-images">
    [Product Image Set here]
  </div>
  <div class="product-description">
    <span>T-Shirts</span>
    <h1>Gildan 2000</h1>
    <p>Purchase your products blank at wholesale or even better choose your color and sizes and click customize. Use our free online designer to make your designs come to life!</p>
  </div>
  <div class="product-configuration">
    [Product Configuration controls here]
  </div>
  <div class="product-price">
    <span>148$</span>
    <a href="#" class="cart-btn">Add to cart</a>
  </div>
</div>