CSS布局:两列项目之间的元素混合顺序

fykwrbwg  于 2023-04-08  发布在  其他
关注(0)|答案(1)|浏览(107)

我正在努力实现以下目标:

元素的高度不是固定的,而是基于内容。元素的宽度是布局空间的百分比。
Flexbox或Grid是否可以做到这一点?

bprjcwpo

bprjcwpo1#

基于与@Paulie_D的评论和讨论,这里有一个只使用css的解决方案。
它利用了这样一个事实,即当屏幕很小时,你可以使用display: contents来逻辑地展开项目,以及你可以通过order: X来设置元素顺序的位置(都是在css中)。

.outer {
  display: flex;
  flex-direction: row;
}

.inner {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 720px){
  .inner {
    display: contents;
  }
  .outer {
    flex-direction: column;
  }
}
<div class="outer">
  <div class="inner">
    <div id="a1" style="order:1"> A1
    </div>
    <div id="a2" style="order:4"> A2
    </div>
    <div id="a3" style="order:5"> A3
    </div>
    <div id="a4" style="order:7"> A4
    </div>
  </div>
  <div class="inner">
    <div id="b1" style="order:2"> B1
    </div>
    <div id="b2" style="order:3"> B2
    </div>
    <div id="b3" style="order:6"> B3
    </div>
  </div>
</div>

相关问题