重新排列没有绝对位置的弹性项目

Question

我想知道是否有任何方法可以使用保持相同结构（顺序：box1、box2、box3 和 box4）的 flex box 来实现这种组合。

我知道了，但 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

我想知道是否有任何方法可以使用保持相同结构的弹性盒来实现这种组合。

是的，有一种方法可以在不更改 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-basis: 100%，或简写为flex: 100%）。
• 第二列和第四列合并，因此根据需要调整它们的高度并使用order 属性将第 4 列移到第 3 列之前。

Answer 2

擦除 flex 属性并使用 float：

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

Answer 3

• 将 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