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>

如何在flex中强制连续放置最大数量的盒子？

1 个答案: