html - 如何在 flex 中强制连续放置最大数量的框？

Question

我总共有 4 个元素要显示在一个页面上。顶部有两个元素，下面有两个元素。底部尺寸的那些需要与顶部的不同。我正在使用 flexbox 来做到这一点。问题是，在宽屏显示器上，第三个元素一直换到第一行。这是我的代码。

.dashboard {
  &-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    min-height: 100vh;
    margin-top: $reporting-report-offset-top;
    max-width: 1900px;

    &-grid {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-content: center;
      overflow: hidden;
      max-height: 100%;
      margin: 0 auto;
      max-width: 1900px;

      &-item {
        margin: $reporting-view-spacing;
        // &-1 {
        //   min-width: 50%;
        // }

        &-2 {
          // min-width: 50%;
          // margin-right: 100px
        }

        &-3 {
          max-width: 238px !important;
          margin-right: 8px;
          height: 687px !important;
      }

顶部的两个元素将占据可用宽度的 50%(包括边距)，第三个元素将占据底部行的大约 25%，第四个元素将占据另外 75%。如何强制底部元素到第二行并阻止它换行到顶部？

Answer 1

这是一种在 flex 元素中添加换行符样式的方法。

.separator {
   content: '';
   width: 100%;
}

.boxes {
  display: flex;
  flex-flow: row wrap;
}

.box {
  height: 100px;
  background: red;
  border: 1px solid black;
  box-sizing: border-box;
}

.box--25 {
  width: 25%;
}

.box--50 {
  width: 50%;
}

.box--75 {
  width: 75%;
}

.separator {
  content: '';
  width: 100%;
}

<div class="boxes">
  <div class="box box--50"></div>
  <div class="box box--50"></div>
  <br class="separator" />
  <div class="box box--25"></div>
  <div class="box box--75"></div>
</div>