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

Question

我一直在研究Flexbox属性,order: 1以便在我的div设置为class时将其设置为第一个.default-address.我的问题是有任意数量的.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

order所有弹性项目的初始值均为零.具有相同order值的Flex项目根据它们在源中的显示方式进行布局.因此,首先放置一个弹性项目,你可以简单地给它order: -1而不是order: 1,你不必担心有多少其他项目:

.default-address {
  order: -1;
}