html - 如何在 html 中创建可变大小的 tile 布局

Question

我正在尝试看看是否可以创建一个像下面这样的可变大小的图 block 布局，而无需任何中间包装器 divs。

我首先尝试了一种 flexbox 方法，然后发现 flexbox 并不是为了让子元素跨行移动而设计的，然后是一个普通的 inline-block 和 float: left 方法，但存在完全相同的问题。我无法让 block 移动到不同的行并进入它们之间的空间。

我也在寻找一种无 javascript 的方法。所以不使用 Masonry 之类的东西。

Codepen

对我来说很重要的一点是，我正在尝试一般解决这个问题，这意味着虽然我们当然可以找到一种方法来创建这个特定布局，我更担心弄清楚如何创建这种通用类型的布局，我可能无法提前知道图 block 的确切方向、顺序或大小。

这是所需的 html(jade):

.xbox-tiles
    .tile 1 x 1
    .tile 1 x 1
    .big-tile 2 x 2
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1

和sass:

@import "bourbon"

%tile
    @include flex(0)
    @include flex-basis(auto)

    // display: inline-block
    // float: left

    box-sizing: border-box


.xbox-tiles
    @include display(flex)
    @include flex-direction(column)
    @include flex-flow(wrap)

    height: 90vh
    width: 90vw

    .tile
        height: 33.33%
        width: 25%
        @extend %tile

    .big-tile
        height: 66.66%
        width: 50%
        @extend %tile

Answer 1

在对 this question 发表评论之后我能够制作这个 codepen它使用简单的 float ，不需要 flexbox，换句话说，将所有小方 block 向左浮动，将大方 block 向右浮动:

@import "bourbon"

%tile    
    box-sizing: border-box

.xbox-tiles

    height: 90vh
    width: 90vw

    .tile
        float: left
        height: 33.33%
        width: 25%
        @extend %tile

    .big-tile
        float: right
        height: 66.66%
        width: 50%
        @extend %tile

body {
  background-color: grey;
}

.xbox-tiles .tile, .xbox-tiles .big-tile {
  box-sizing: border-box;
  border: 2px solid white;
  margin: 0;
}

.xbox-tiles {
  height: 90vh;
  width: 90vw;
  background-color: cyan;
}
.xbox-tiles .tile {
  float: left;
  height: 33.33%;
  width: 25%;
}
.xbox-tiles .big-tile {
  float: right;
  height: 66.66%;
  width: 50%;
}

<div class="xbox-tiles">
  <div class="tile">1 x 1 - 1</div>
  <div class="tile">1 x 1 - 2</div>
  <div class="big-tile">2 x 2 - 3</div>
  <div class="tile">1 x 1 - 4</div>
  <div class="tile">1 x 1 - 5</div>
  <div class="tile">1 x 1 - 6</div>
  <div class="tile">1 x 1 - 7</div>
  <div class="tile">1 x 1 - 8</div>
  <div class="tile">1 x 1 - 9</div>
</div>