div分二乘二叠，不使用flex-wrap

Question

在下面的代码段中，我希望div出现每行2行和2列

.column-container {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
}

.subject-status-row--count {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="column-container">
  <div class="wrapper">
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div _ngcontent-c17="" class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      30
    </span>
    </div>
  </div>
</div>

Answer 1

您是包装.column-container，其中只有有1个小孩：.wrapper。您应该真的包裹.wrapper：

.column-container {
  display: flex;
  min-height: 100%;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}
.wrapper > * {
  flex-basis: calc(50% - 40px);
}

.subject-status-row--count {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="column-container">
  <div class="wrapper">
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      10
      </span>
    </div>
    <div _ngcontent-c17="" class="subject-status-row--count">
      <span>
      10
      </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      30
    </span>
    </div>
  </div>
</div>

Answer 2

您需要给包装器一个高度和宽度，以使包装器起作用。你需要的柔性基础为宽度/高度减去边框。

同样，在您的情况下，您将flex放在错误的容器上才能使包装正常工作。

.flex-wrapper {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 400px;
}

.flex-cell {
  flex: 1;
  border:1px solid blue;
  flex-basis: calc(50% - 2px); //size - border width
  
  // vertically center the content - assume that's what you wanted
  text-align: center;    
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-wrapper">
  <div class="flex-cell">
    <span class="content-center">1</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">2</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">3</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">4</span>
  </div>
</div>