css - 我怎样才能先用订单 : 1 without setting order: 2, 等显示我的 flex child ？

Question

我一直在研究 Flexbox 属性 order: 1，以便在其类设置为 .default-address 时将我的 div 排在第一位。我的问题是后面有任意数量的 .address div，所以我不能使用 order: 2、order: 3 等.

.container {
    display: flex;
    flex-direction: column;
}
.default-address {
    order: 1;
}

<div class="container">
    <div class="default-address">123 Sesame Street</div>
    <div class="address">5th Avenue</div>
    <div class="address">1600 Pennsylvania Avenue</div>
    <div class="address">221 B Baker St.</div>
</div>

有没有一种方法可以在不定义其他顺序的情况下定义第一个顺序？

Answer 1

对于所有 flex 元素，order 的初始值为零。具有相同 order 值的 Flex 元素根据它们在源代码中的显示方式进行布局。所以要先放置一个 flex 元素，你可以简单地给它 order: -1 而不是 order: 1，你不必担心还有多少其他元素是:

.default-address {
  order: -1;
}