使用 flex 对元素进行垂直和水平重新排序

Question

我正在使用显示：flex 和顺序值来重新排序不同断点的元素。到目前为止，它一直运行良好，但我只使用全宽元素，所以到目前为止它很简单。现在 Id 喜欢做同样的事情，但将两个元素放在一起。例如

<div class="wrapper">    
    <div class="object1">...</div>
    <div class="object2">...</div>
    <div class="object3">...</div>
    <div class="object4">...</div>
    <div class="object5">...</div>
</div>

应该这样布局：

[ object2               ]
[ object3               ]
[ object 1 ] [ object 5 ]
[ object 4              ]

到目前为止，我的CSS看起来像这样：

.wrapper {
    display: flex;
    flex-direction: column;
}
.object1 {
    order: 3;
    width: 50%;
}
.object2 {
    order: 1;
}
.object3 {
    order: 2;
}
.object4 {
    order: 5;
}
.object5 {
    order: 4;
    width: 50%;
}

这给我的东西看起来像这样：

[ object2               ]
[ object3               ]
[ object 1 ]
[ object 5 ]
[ object 4              ]

任何指示将不胜感激。

Answer 1

我不确定flex-direction:column在这里是否合适（不知道全部情况）。

首先，您必须启用包装才能获得两列（并限制我怀疑的高度），但我认为您会发现 1 和 5 的对齐无论如何都是有问题的。

看：

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  box-shadow: 0 0 1px 0 black;
}
[class^="object"] {
  text-align: center;
  border: 1px solid red;
  width: 50%;
  height: 25px;
}
.object1 {
  order: 3;
}
.object2 {
  order: 1;
}
.object3 {
  order: 2;
}
.object4 {
  order: 5;
}
.object5 {
  order: 6;
  margin-top: 50px;
}

<div class="wrapper">
  <div class="object1"><span>object1</span>
  </div>
  <div class="object2"><span>object2</span>
  </div>
  <div class="object3"><span>object3</span>
  </div>
  <div class="object4"><span>object4</span>
  </div>
  <div class="object5"><span>object5 - But alignment is manual?</span>
  </div>
</div>

但是，使用flex-direction:row（和包装）....这很简单。

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  width: 50%;
  margin: 1em auto;
  border: 1px solid grey;
  flex-wrap: wrap;
}
[class^="object"] {
  flex: 0 0 100%;
  text-align: center;
  border: 1px solid red;
}
.object1 {
  order: 3;
  flex: 0 0 50%;
}
.object2 {
  order: 1;
}
.object3 {
  order: 2;
}
.object4 {
  order: 5;
}
.object5 {
  order: 4;
  flex: 0 0 50%
}

<div class="wrapper">
  <div class="object1"><span>object1</span>
  </div>
  <div class="object2"><span>object2</span>
  </div>
  <div class="object3"><span>object3</span>
  </div>
  <div class="object4"><span>object4</span>
  </div>
  <div class="object5"><span>object5</span>
  </div>
</div>

使用嵌套的弹性框和display:contents，这将容易得多......但我们还没有到达那里。