css - 使用 display flex 的复杂布局

Question

我正在尝试实现以下布局:

使用以下 html:

<div class="large">
    <div (click)="tap('1')" class="one">1</div>
    <div (click)="tap('4')" class="four">4</div>
    <div (click)="tap('7')" class="seven">7</div>
    <div (click)="tap('0')" class="zero">0</div>
    <div (click)="tap('2')" class="two">2</div>
    <div (click)="tap('5')" class="five">5</div>
    <div (click)="tap('8')" class="eight">8</div>
    <div (click)="tap('3')" class="three">3</div>
    <div (click)="tap('6')" class="six">6</div>
    <div (click)="tap('9')" class="nine">9</div>
    <div (click)="tap('.')" class="separator">{{separator}}</div>
    <div (click)="tap('<')" class="delete"><i class="theme-delete-i"></i></div>
    <div (click)="ok()" class="ok "><span>OK</span></div>
</div>  

以及 LESS 中的以下 css 类:

.large {
        display: flex;
        flex-wrap: wrap;

        div {
            display: block;
            margin: 1px;
            text-align: center;
            background: @numpad_keys_background;
            height: @numpad-keys-height;
            line-height: @numpad-keys-height;
            font-size: 1.3em;
            color: @numpad_value_color;
            flex: 1 0 calc(25% - 2px);
        }

        .one {
            order: 1;
        }

        .two {
            order: 2;
        }

        .three {
            order: 3;
        }

        .four {
            order: 5;
        }

        .five {
            order: 6;
        }

        .separator {
            order: 13 !important;
        }

        .six {
            order: 7;
        }

        .seven {
            order: 8;
        }

        .eight {
            order: 9;
        }

        .nine {
            order: 10;
        }

        .zero {
            order: 12;
            flex: 1 0 calc(25% - 2px);
        }

        .delete {
            order: 4;
            height: 2*@numpad-keys-height + 1/16em;

            > span {
                line-height: 2*@numpad-keys-height + 1/16em;
            }
        }

        .ok {
            order: 11;
            height: 2*@numpad-keys-height + 1/16em;

            > span {
                line-height: 2*@numpad-keys-height + 1/16em;
            }
        }
    }

但我的结果是:

我必须在 flex 布局中更改什么才能使其工作？请注意，此 View 用于我们网站的 3 个不同位置，因此我无法更改 html 结构。似乎我找不到同时使用键 (divs) 中的列和行差异的方法。

Answer 1

如果没有额外的包装器，Flexbox 无法做到这一点。 CSS-Grid 在这里是最佳选择，因为它还允许您按顺序列出 HTML 元素，而不是尝试重新排列每个元素。

.large {
  display: inline-grid;
  grid-template-columns: repeat(4, 60px);
  grid-template-rows: repeat(4, 60px);
  grid-gap: .25em;
  margin: 1em;
}

.large div {
  background: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete {
  grid-column: 4;
  grid-row: 1 / span 2
}

.ok {
  grid-column: 4;
  grid-row: 3 / span 2
}

.zero {
  grid-column: 1 / span 2
}

<div class="large">
  <div (click)="tap('<')" class="delete">X<i class="theme-delete-i"></i></div>
  <div (click)="tap('1')" class="one">1</div>
  <div (click)="tap('2')" class="two">2</div>
  <div (click)="tap('3')" class="three">3</div>
  <div (click)="tap('4')" class="four">4</div>
  <div (click)="tap('5')" class="five">5</div>
  <div (click)="tap('6')" class="six">6</div>
  <div (click)="tap('7')" class="seven">7</div>
  <div (click)="tap('8')" class="eight">8</div>
  <div (click)="tap('9')" class="nine">9</div>
  <div (click)="tap('0')" class="zero">0</div>
  <div (click)="tap('.')" class="separator">.</div>
  <div (click)="ok()" class="ok "><span>OK</span></div>
</div>