没有嵌套容器的桌面和移动flexbox布局 [英] Desktop and mobile flexbox layouts without nested containers

问题描述

我有3个div，必须在移动布局的一定顺序，但我必须打破第二个div作为桌面布局的侧边栏。所以移动：

I have 3 divs that must be in a certain order for the mobile layout, but I have to break out the 2nd div as a sidebar for the desktop layout. So for mobile:

=====

| div1 |

=====

| div2 |

=====

| div3 |

=====

=====
| div1 |
=====
| div2 |
=====
| div3 |
=====

而对于桌面：

===== =====

| div1 | |          |

===== | div2  |

| div3 | |          |

===== =====

===== =====
| div1 | |         |
===== | div2 |
| div3 | |         |
===== =====

在桌面布局中，div 2具有阴影背景，因此必须是父级的完整高度。我可以浮动div1和div3左和div2右，实现我想要的，但是然后我需要使用javascript来获得div2填充父的高度。我想使用flexbox，但只是不能弄清楚如何实现桌面效果，而没有嵌套div1和div3，这打破了移动布局。任何想法？

In the desktop layout, div 2 has a shaded background, so must be the full height of the parent. I can float div1 and div3 left and div2 right and achieve what I want, but then I need to use javascript to get div2 to fill the height of the parent. I'd like to use flexbox, but just can't figure out how to achieve the desktop effect without nesting div1 and div3, which breaks the mobile layout. Any thoughts?

推荐答案

根据你想要 nr2 在桌面布局中，这里是另一个选项，使用伪元素创建错觉，它们都填充了他们的父母。

Based on how you want nr2 to look like when in desktop layout, here is another option, using a pseudo element to create the illusion of them all fill their parent.

示例1

.parent {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.child {
  position: relative;
  padding: 10px;
  border: 2px solid white;
  box-sizing: border-box;
}
.nr1 {
  background-color: lightblue;
  order: -1;
}
.nr2 {
  background-color: lightgreen;
}
.nr3 {
  background-color: lightgray;
}
@media (max-width: 800px) {
  .parent {
    display: block;
  }
  .nr1, .nr3 {
    float:left;
    width: 50.1%;
  }
  .nr2 {
    float:right;
    width: 49.9%;
  }
  .nr3::after,
  .nr2::after {
    content: '';
    position: absolute;
    background-color: inherit;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100vh;
  }
}

<div class="parent">
  <div class="child nr2"> 2 </div>
  <div class="child nr1"> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> </div>
  <div class="child nr3"> 3 </div>
</div>

示例2

.parent {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.child {
  position: relative;
  padding: 10px;
  border: 2px solid white;
  box-sizing: border-box;
}
.nr1 {
  background-color: lightblue;
  order: -1;
}
.nr2 {
  background-color: lightgreen;
}
.nr3 {
  background-color: lightgray;
}
@media (max-width: 800px) {
  .parent {
    display: block;
  }
  .nr1, .nr3 {
    float:left;
    width: 50.1%;
  }
  .nr2 {
    float:right;
    width: 49.9%;
  }
  .nr3::after,
  .nr2::after {
    content: '';
    position: absolute;
    background-color: inherit;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100vh;
  }
}

<div class="parent">
  <div class="child nr2"> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> </div>
  <div class="child nr1"> 1 </div>
  <div class="child nr3"> 3 </div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.child {
  position: relative;
  padding: 10px;
  border: 2px solid white;
  box-sizing: border-box;
}
.nr1 {
  background-color: lightblue;
  order: -1;
}
.nr2 {
  background-color: lightgreen;
}
.nr3 {
  background-color: lightgray;
}
@media (max-width: 800px) {
  .parent {
    display: block;
  }
  .nr1, .nr3 {
    float:left;
    width: 50.1%;
  }
  .nr2 {
    float:right;
    width: 49.9%;
  }
  .nr3::after,
  .nr2::after {
    content: '';
    position: absolute;
    background-color: inherit;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100vh;
  }
}

<div class="parent">
  <div class="child nr2"> 2 </div>
  <div class="child nr1"> 1 </div>
  <div class="child nr3"> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> </div>
</div>

这一个使用父对象上的伪，使 nr2 看起来不错，具有渐变背景

This one uses a pseudo on the parent, to make nr2 look good having a gradient background

.parent {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.child {
  position: relative;
  padding: 10px;
  border: 2px solid white;
  box-sizing: border-box;
}
.nr1 {
  background-color: lightblue;
  order: -1;
}
.nr2 {
  background-color: lightgreen;
}
.nr3 {
  background-color: lightgray;
}
@media (max-width: 800px) {
  .parent {
    display: block;
  }
  .parent::before {
    content: '';
    position: absolute;
    background: linear-gradient(lightgreen, green);
    left: 50.1%;
    top: 2px;
    width: 49.9%;
    height: 100%;
  }
  
  .nr1, .nr3 {
    float:left;
    width: 50.1%;
  }
  .nr2 {
    float:right;
    width: 49.9%;
    border: none;
    background-color: transparent;
  }
  .nr3::after {
    content: '';
    position: absolute;
    background-color: inherit;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100vh;
  }
}

<div class="parent">
  <div class="child nr2"> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> </div>
  <div class="child nr1"> 1 <br> 1 <br> 1 <br> </div>
  <div class="child nr3"> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> </div>
</div>

这篇关于没有嵌套容器的桌面和移动flexbox布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！