html - How to force a maximum amount of boxes in a row in flex?

Question

I have 4 total items that I want to display on a page. Two items on top and 2 below. The ones on the bottom dimensions need to be different from the ones on top. I am using flexbox to do this. The problem is, on a wide monitor the third item keeps wrapping to the top row. Here is my code.

.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;
      }

The top two items will take 50% of the available width(margins included) the third item is intended to take approximately 25% of the bottom row and the 4th item the other 75%. How do I force the bottom item to the second row and stop it from wrapping to the top?

标签： htmlcssflexbox

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>