重新安排没有绝对位置的弹性物品

Question

我不知道是否有任何方法可以使用保持相同结构（即订单：box1，box2，box3和box4）的弹性盒来实现这种组合。

我得到了这一点，但box4被推向下跌破其他框：http://codepen.io/anon/pen/xRVEwW

.container{ 
 
    width:600px; 
 
    position:relative; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box2, .box4{ 
 
    margin:0 auto; 
 
} 
 
.box1{ 
 
    background:pink; 
 
    position:absolute; 
 
    left:0; top:0; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
    position:absolute; 
 
    right:0; top:0; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

Answer 1

不知有什么办法可以实现这种使用Flex箱保持相同的结构组成。

是的，有一种方法可以在不改变HTML的情况下实现他的布局。在这里你去：

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    height: 500px; 
 
} 
 

 
.box1 { flex: 100%; order: 0; } 
 
.box2 { flex: 80%; order: 1; } 
 
.box3 { flex: 100%; order: 3; } 
 
.box4 { flex: 20%; order: 2; } 
 

 
.box1 { background: pink;  width: 200px; } 
 
.box2 { background:lightgreen; width: 200px; } 
 
.box3 { background:lightgrey; width: 200px; } 
 
.box4 { background:lightblue; width: 200px; }

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

revised codepen

要点：

• 使用列方向，使包裹式柔性容器。
• 定义容器的高度（因此flex项目知道在哪里包装）。
• 第一列和第三列变为全高（flex-basis: 100%或简写flex: 100%）。
• 第二和第四列组合在一起，所以调整其高度是必要和使用order属性栏3.

Answer 2

• 裹box2和box4在一个共同的DIV
• 添加align-items: flex-start;（或baseline）至.container

.container{ 
 
    width:600px; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    align-items: flex-start; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box1{ 
 
    background:pink; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box4">Box 4.</div> 
 
    </div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, 
 
    id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
</div>

http://codepen.io/borkdude/pen/VmaKRZ

Answer 3

擦除弯曲特性，并使用浮动：

float:left上箱1和2，float:right上盒3和4没有必要改变HTML：

.container{ 
 
    width:600px; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box1{ 
 
    background:pink; 
 
    float: left; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
    float: left; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
    float: right; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
    margin:0 auto; 
 
    float: right; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

http://codepen.io/anon/pen/eBZBYL