Flexbox使用列更改顺序 [英] Flexbox change order with column

问题描述

首张图片在PC上显示网格：

移动设备上的第二个图像显示网格：

正如你所看到的，我需要改变顺序和网格。我尝试使用flexbox，但我需要在PC上分组B& C，并获得相等的高度。

重要条件：

• 在PC上高度等于和B和C


• 在手机上我获得订单：B，A，C

我知道我可以使用简单的duble时间B块和使用显示/隐藏，但这是不可接受的在我的项目。

解决方案

这里是一个演示，如果你知道外部包装器的高度它是下面示例中的视口高度：

  body {margin：0 ;} * {box-sizing：border-box;}。wrapper {display：flex; flex-wrap：wrap; height：100vh;}。wrapper> div {border：1px solid; width：50％; height：50％;}。wrapper> div：first-child {height：100％;}。wrapper> div：last-child {margin-left：auto;位置：相对; top：-50％;} @ media only screen and（max-width：650px）{.wrapper {display：flex; flex-direction：column; flex-wrap：initial; } .wrapper> div {width：100％; }。wrapper> div：first-child {order：2; } .wrapper> div：last-child {order：3; top：0; }}  

 < div class =wrapper> < div> A< / div> < div> B< / div> < div> C< / div>< / div>  

这是一个演示，当你将 B 和 C 包装到容器中。请注意，不能获取 B - A - C 在移动视图中只有 A - B - C 。请参阅下面的代码段：

  body {margin：0; } * {box-sizing：border-box;}。wrapper {display：flex;}。wrapper> div：first-child {width：50％; border：1px solid;}。wrapper> .inner-wrap {display：flex; flex-direction：column; width：50％;}。wrapper> .inner-wrap> div {width：100％; border：1px solid;} @ media only screen and（max-width：650px）{.wrapper {display：flex; flex-direction：column; } .wrapper> div：first-child {width：100％; } .wrapper> .inner-wrap {width：100％; }}  

 < div class =wrapper> < div class =content> < p> A< / p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Aenean massa。 um。。。。。。。。。。。。。 Donec quam felis，ultricies nec，pellentesque eu，pretium quis，sem。 Nulla consequat massa quis enim。 Donec pede justo，fringilla vel，aliquet nec，vulputate eget，arcu。 < / div> < div class =inner-wrap> < div class =content> < p> B< / p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Aenean massa。 um。。。。。。。。。。。。。 Donec quam felis，ultricies nec，pellentesque eu，pretium quis，sem。 Nulla consequat massa quis enim。 Donec pede justo，fringilla vel，aliquet nec，vulputate eget，arcu。 < / div> < div class =content> < p> C< / p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Aenean massa。 um。。。。。。。。。。。。。 Donec quam felis，ultricies nec，pellentesque eu，pretium quis，sem。 Nulla consequat massa quis enim。 Donec pede justo，fringilla vel，aliquet nec，vulputate eget，arcu。 < / div> < / div>< / div>  

结论：：

我想如果你不知道 flexbox 的确切高度，将无法在移动视图中实现订单以及PC中的布局。

让我们知道您对此的反馈。谢谢！

First images presents grid on PC: Second images present grid on mobile devices:

As you can see I need to change order and grid. I try to use flexbox but I need to group B&C on PC, and get A equal height.

Important conditions:

• On PC A height is equal to sum B and C
• On mobile I get order: B, A, C

I know that I can use simple duble times B block and use show/hide, but this is not acceptable in my project.

解决方案

Here is a demo if you know what the height of the outer wrapperis- for illustration it is the viewport height in the below example:

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}
.wrapper > div {
  border: 1px solid;
  width: 50%;
  height: 50%;
}
.wrapper > div:first-child {
  height: 100%;
}
.wrapper > div:last-child {
  margin-left: auto;
  position: relative;
  top: -50%;
}
@media only screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: initial;
  }
  .wrapper > div {
    width: 100%;
  }
  .wrapper > div:first-child {
    order: 2;
  }
  .wrapper > div:last-child {
    order: 3;
    top: 0;
  }
}

<div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Here is a demo when you wrap B and C into a container. Note that it is not possible to get B-A-C in mobile view here- only A-B-C is possible. See snippet below:

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
}
.wrapper > div:first-child {
  width: 50%;
  border: 1px solid;
}
.wrapper > .inner-wrap {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.wrapper > .inner-wrap > div {
  width: 100%;
  border: 1px solid;
}
@media only screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper > div:first-child {
    width: 100%;
  }
  .wrapper > .inner-wrap {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="content">
    <p>A</p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
  <div class="inner-wrap">
    <div class="content">
      <p>B</p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div>
    <div class="content">
      <p>C</p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div>
  </div>
</div>

Conclusion:

I guess if you don't know the exact height of the flexbox, you won't be able to achieve the order in mobile view along with the layout in PC.

Let me know your feedback on this. Thanks!

这篇关于Flexbox使用列更改顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！