Сложная верстка с использованием дисплея 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>  

и следующееКлассы CSS в LESS:

.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макет, чтобы заставить его работать?Обратите внимание, что это представление используется в 3 разных местах на нашем веб-сайте, поэтому я не могу изменить структуру HTML.Похоже, я не могу найти способ использовать разницу между столбцами и строками в ключах (div).

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>