Question

我使用display：flex和order值来重新排序不同断点的元素。它到目前为止一直运作良好，但我只使用全角元素，所以到目前为止它一直很简单。现在我喜欢这样做，但把两个元素放在一起。 e.g。

<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＆amp;的对齐方式。 5无论如何都有问题。

请参阅：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

* {
  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%
}

＆＃13;

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

＆＃13;

使用嵌套的flexbox和display:contents这会更容易......但我们还没有。

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

1 个答案: