重新安排沒有絕對位置的彈性物品

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