Flex 换行 CSS 问题

Question

我有一个 HTML 结构，可以在一行中显示主要和次要信息。到目前为止，要求是连续显示 3 个元素，效果非常好。

但是在给定的场景中，还有额外的 3 个元素来自 API，这会缩小每个元素。

我想将接下来的 3 个元素包装在另一行中。我尝试使用

flex-wrap

的解决方案不起作用。 （PS：不能简单地修改 HTML 结构，因为主要信息首先突出显示，然后才显示次要信息。请取消注释第一行中显示的代码。）

.results {
  display: flex;
  flex-direction: row;
}

.primary-container {
  flex: 1 1 33.33333%;
  display: flex;
}


.card {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  padding: 30px;
  border: 1px solid gray;
}

.secondary-container {
  display: flex;
  flex: 1 1 66.66666%;
}

card.break {
  flex-basis: 100%;
  flex-wrap: wrap;
}

<div class="results">
    <div class="primary-container">
        <div class="card">
          1
        </div>
    </div>
     <div class="secondary-container">
       <div class="card">2</div>
       <div class="card">3</div>
       <!-- <div class="card break">4</div>
       <div class="card">5</div>
       <div class="card">6</div> -->
      </div>
  </div>

Answer 1

使用 flex-wrap 的做法是正确的，但你需要稍微调整一下 CSS。

.results {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allow wrapping */
}

.primary-container {
  flex-basis: 33.33333%; /* Initially occupy 33.33% of the space */
}

.card {
  flex: 1 0 auto; /* Allow the card to grow, but not shrink */
  height: 100%;
  padding: 30px;
  border: 1px solid gray;
  box-sizing: border-box; /* Include padding in the width calculation */
}

.secondary-container {
  flex-basis: 100%; /* Occupy full width initially */
  display: flex;
  flex-wrap: wrap; /* Allow secondary cards to wrap */
}

.secondary-container .card {
  flex-basis: 33.33333%; /* Each card occupies 33.33% of the width */
}

/* Define breakpoints for smaller screens if needed */
@media screen and (max-width: 768px) {
  .primary-container,
  .secondary-container .card {
    flex-basis: 50%; /* Two cards in a row for smaller screens */
  }
}

<div class="results">
  <div class="primary-container">
    <div class="card">1</div>
  </div>
  <div class="secondary-container">
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card break">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
  </div>
</div>

如有疑问，请随时询问。

Answer 2

尝试将 flex-wrap:wrap 添加到 .primary-container 和 .secondary-container

.primary-container {
  flex: 1 1 33.33333%;
  display: flex;
  flex-wrap: wrap;
}
.secondary-container {
  display: flex;
  flex: 1 1 66.66666%;
  flex-wrap: wrap;
}

当行中没有足够的可用空间时，这应该允许子元素换行到新行。

Answer 3

Flexbox 并不总是解决方案。 Float可以在这里做到：

.card {
  float: left;
  width:calc(100%/3); /* control the width you want */
  padding: 30px;
  border: 1px solid gray;
  box-sizing: border-box;
}

/* the below is only needed if you will use a small width */
.break {
  clear: both;
}

.results {
  overflow: auto;
}

<div class="results">
  <div class="primary-container">
    <div class="card">
      1
    </div>
  </div>
  <div class="secondary-container">
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card break">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
  </div>
</div>