更新：

Question

对于页面上的某个部分，我试图显示两个矩形div，这些矩形div堆叠在两侧的两个正方形div之间，其高度与两个堆叠div的高度一样，这些div内是img标签。

我之所以使用此标记，是因为在移动设备上，我希望能够将它们放置在具有overflow: hidden父级的展开式伸缩行上，以便可以使用滑动代码来平移X轴。我在使用Flexbox使用此标记为桌面创建此布局时遇到问题（无网格，需要支持IE11）。有人用这个标记做过这种布局吗？谢谢。

 <div class="flex_container">
   <div class='flex_child square'>
     <img...>
   </div>
   <div class='flex-child rect'>
     <img...>
   </div>
   <div class='flex-child rect'>
     <img...>
   </div>
   <div class='flex-child square'>
     <img...>
   </div>
 </div>

Answer 1

对内容进行一些主要假设，但是您可以使用绝对定位来对齐内容。本质上，您可以从文档流中拉出中间的两个元素，并通过定位来模拟堆叠。

在这种情况下，当位于767px上方时，整行位于文档流内。在767px下方时，我们重新定位内部的两个元素，并将容器设置为justify-content: space-between，以提供可视空间。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex_container {
  position: relative;
  display: flex;
}

.flex_item {
  flex: 1;
  height: 120px;
  border: 1px solid orange;
  padding: 40px;
  background-color: red;
  text-align: center;
}

@media (max-width: 767px) {
  .flex_container {
    justify-content: space-between;
  }  

  .flex_item {
    padding: 20px;
  }
  
  .square {
    flex: 0 1 33%;
  }
  
  .rect {
    position: absolute;
    left: calc(100% / 3);
    width: calc(100% / 3);
    height: 50%;
  }
  .rect.three {
    top: 50%;
  }
}

<div class="flex_container">
  <div class="one flex_item square">
    One
  </div>
  <div class="two flex_item rect">
    Two
  </div>
  <div class="three flex_item rect">
    Three
  </div>
  <div class="four flex_item square">
    Four
  </div>
</div>

同样，请小心-假定您可以控制容器的高度和其中的内容的尺寸。如果没有，这种布局很容易分崩离析。如其他注释中所述，如果您想要更多的结构和稳定性，最好将内部元素与带有flex-direction: column的另一个flex元素一起包装。只知道风险！

Answer 2

假设这将是页面的主要布局，您可以尝试设置固定高度并在flexbox中使用列方向：

.flex_container {
  height: 100vh; /*adjust this value like you want*/
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
}
.flex_child {
  background:purple;
  border:2px solid #fff;
  box-sizing:border-box;
  width:calc(100% / 3);
}
.square {
  flex:1 1 100%;
}
.rect {
  flex:1 1 47%;
}

body {
  margin: 0;
}

<div class="flex_container">
  <div class='flex_child square'></div>
  <div class='flex_child rect  '></div>
  <div class='flex_child rect  '></div>
  <div class='flex_child square'></div>
</div>

如果希望获得更好的浏览器支持，则可以通过稍微调整类以使开始处有2个正方形来使用float / inline-block：

.flex_container {
  height: 100vh; /*adjust this value like you want*/
}
.flex_child {
  background:purple;
  border:2px solid #fff;
  box-sizing:border-box;
  width:calc(100% / 3);
  height:100%;
}
.square:nth-child(1) {
  float:left;
}
.square:nth-child(2) {
  float:right;
}
.rect {
  display:inline-block;
  height:50%;
  vertical-align:top;
}

body {
  margin: 0;
}

<div class="flex_container">
  <div class='flex_child square'></div>
  <div class='flex_child square'></div>
  <div class='flex_child rect  '></div>
  <div class='flex_child rect  '></div>
</div>

如果您也无法更改类，请使用一些负的边距来纠正最后一个元素的位置：

.flex_container {
  height: 100vh; /*adjust this value like you want*/
}
.flex_child {
  background:purple;
  border:2px solid #fff;
  box-sizing:border-box;
  width:calc(100% / 3);
  height:100%;
}
.square:first-child {
  float:left;
}
.square:last-child {
  float:right;
  margin-top:-50vh;
}
.rect {
  display:inline-block;
  height:50%;
  vertical-align:top;
}

body {
  margin: 0;
}

<div class="flex_container">
  <div class='flex_child square'></div>
  <div class='flex_child rect  '></div>
  <div class='flex_child rect  '></div>
  <div class='flex_child square'></div>
</div>

Answer 3

尝试

   .flex_container{
      display:flex;
      flex-direction: row;
      border: 1px solid red;

    }
    .flex_container2{
      display:flex;
      flex-direction:column;
      border: 1px solid green;
    }  
    .flex-child{
      border: 1px solid blue;
     }

 <div class="flex_container">
   <div class='flex_child square'>A</div>
   <div class="flex_container2">
       <div class='flex-child rect'>B</div>
       <div class='flex-child rect'>C</div>
   </div>
   <div class='flex-child square'>D</div>
 </div>

我认为您需要第二个弹性容器。

Answer 4

如果添加第二个容器来控制两个rect，它将变得更加容易。您可以控制height and width中的square使其为正方形，而不是动态宽度。

.flex-container {
  	display: flex;
  	height: 150px;
}
.container>*, .square {
  background-color: purple;
}

.flex-child {
    flex:1;
    display: inline-flex;
    margin: 2px
}

.square { flex-basis: 25%; }
.container {
    flex-direction: row;
    flex-basis: 50%
}
.container > * { 
  flex-basis: 50%; 
}
.container div:first-child {
	margin-right: 4px 
}

@media (max-width: 767px) {
  .container {
      flex-direction: column;
      flex-basis: 33.333%
  }
  .container div:first-child{
      margin: 0 0 4px 0
   }	
}

<div class="flex-container">
   <div class='flex-child square'></div>
   <div class='flex-child container'>
   		<div class='rect'></div>
   		<div class='rect'></div>
   </div>
   <div class='flex-child square'></div>
 </div>

或：（单击full page以查看更改）

.flex-container {
  	display: flex;
  	height: 150px;
}
.container>*, .square {
  background-color: purple;
}

.flex-child {
    flex:1;
    display: inline-flex;
    margin: 2px
}

.square { flex-basis: 25%; }
.container {
    flex-direction: column;
    flex-basis: 33.333%
}
.container > * { 
  flex-basis: 50%; 
}
.container div:first-child {
	margin: 0 0 4px 0
}

@media (max-width: 767px) {
	.square, .container>* {
    	height: 100px;
    }
	.flex-container {
    	height: auto;
    	flex-direction: column;	
    }
  	.rect {
      flex-direction: column;
      flex-basis: 50%
  	}
  	
}

<div class="flex-container">
   <div class='flex-child square'></div>
   <div class='flex-child container'>
      <div class='rect'></div>
      <div class='rect'></div>
   </div>
   <div class='flex-child square'></div>
 </div>

Answer 5

更新：

我根据flex而不是float更新了答案，以寻求更好的解决方案。您应该将包装器视为列方向，请参见以下代码：

* {
  box-sizing: border-box; /*reset box sizing for all elements*/
}

.flex_container {
  height: 150px; /*this is for example, you can set your height like 100vh or 100%*/
  display: flex;
  flex-flow: column wrap;
}
.flex_child {
  height: 100%;
  border: 1px solid #012;
}
.mid {
  height: 50%;
}

<div class="flex_container">
  <div class='flex_child'>_1_</div>
  <div class='flex_child mid'>_2_</div>
  <div class='flex_child mid'>_3_</div>
  <div class='flex_child'>_4_</div>
</div>

由于.mid类和_2_类的高度为_3_类的50％，因此它们没有被包装，因此可以使用您希望的代码简单而更少。

具有四个div的Flex容器，需要三列，第二列有两行

5 个答案:

更新：