我怎样才能首先通过订单显示我的弹性儿童：1没有设置顺序：2，等等剩余的孩子？

Question

我一直在调查Flexbox属性order: 1，以便在我的div设置为.default-address时将其设置为第一个。我的问题是，此后有.address个div，因此我无法使用order: 2，order: 3等。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有没有办法可以定义第一个订单而不定义其他订单？

Answer 1

对于所有弹性项目，order的初始值为零。具有相同order值的Flex项目将根据它们在源中的显示方式进行布局。因此，要首先放置弹性项目，您只需将其设为order: -1而不是order: 1，并且您不必担心其他项目的数量：

.default-address {
  order: -1;
}