弹性包装：换行；不能与多个弹性盒一起正常工作

Question

我有一个带有两个弹性盒的 DIV，DIV 本身也是一个弹性盒。我希望两个 flex-box 都包裹起来；因此，我将flex-wrap: wrap; 分配给了父DIV。但是，在 flex box 有多行之前，它的行为是正确的。

我会尝试用图片来解释：

以下图片显示了我在任何地方都想要的行为。所有的盒子都包装好了。

但是，当我使用 .book 类添加多个 DIV 以使浏览器需要多行来显示它时，想要的行为就会消失。带有大加号和 id #add-book 的项目占据了一个全新的行。但是，我希望它包装。

这是 HTML 代码，添加的每一本书/盒子都是 DIV[id="added-books"] 中的另一个 DIV，其类为 .book。此代码将如第一个屏幕截图所示显示。我刚刚将具有.book 的类和#Second Book 的ID 的DIV 复制了五次。

#books,
#added-books {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.book,
#add-book {
  display: block;
  border: solid 1px black;
  border-radius: 5px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
  height: 20em;
  width: 13em;
  margin: 2em;
  padding: 1em;
  position: relative;
  z-index: 1;
}

.book hr {
  border: none;
  background-color: black;
  width: 80%;
  height: 2px;
  border-radius: 5px;
}

.book-title {
  font-weight: bold;
  text-align: center;
}

.book-author {
  font-style: italic;
  text-align: center;
  font-size: smaller;
}

.book-pages {
  font-size: xx-small;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

#add-book {
  display: flex;
  justify-content: center;
  align-items: center;
}

#add-book #plus {
  font-size: 10em;
  text-align: center;
}

<div id="books">
  <div id="added-books">
    <div id="The Hobbit" class="book">
      <p class="book-title">The Hobbit</p>
      <hr>
      <p class="book-author">by J.R.R. Tolkien</p>
      <p class="book-pages">295 pages</p>
    </div>

    <div id="Second Book" class="book">
      <p class="book-title">Second Book</p>
      <hr>
      <p class="book-author">by any author</p>
      <p class="book-pages">296 pages</p>
    </div>
  </div>
  <div id="add-book">
    <p id="plus">+</p>
  </div>
</div>

如果我有多行 book/boxes/divs，我如何实现这一点，ID 为 #add-book 的加号 DIV 会像第一个屏幕截图中那样换行？提前感谢您的帮助。

Answer 1

如果您希望书籍和 add-book 全部打包在一起，它们必须参与同一个 flexbox。

这就是display:contents 的设计目的——从盒子树中删除中间盒子，以便 DOM 较低级别的元素可以参与相同的弹性盒子或网格。在这里，要删除的盒子是由 #add-books 元素生成的盒子。

所以

#added-books {
  display:contents;
}

#books {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.book, #add-book{
    display: block;
    border: solid 1px black;
    border-radius: 5px;

    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);

    height: 20em;
    width: 13em;
    margin: 2em;
    padding: 1em;

    position: relative;
    z-index: 1;
}

.book hr {
    border: none;
    background-color: black;
    width: 80%;
    height: 2px;
    border-radius: 5px;
}

.book-title {
    font-weight: bold;
    text-align: center;
}

.book-author {
    font-style: italic;
    text-align: center;

    font-size: smaller;
}

.book-pages {
    font-size: xx-small;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

#add-book {
    display: flex;
    justify-content: center;
    align-items: center;
}

#add-book #plus {
    font-size: 10em;
    text-align: center;
}

<div id="books">
    <div id="added-books">
        <div id="TheHobbit" class="book">
            <p class="book-title">The Hobbit</p>
            <hr>
            <p class="book-author">by J.R.R. Tolkien</p>
            <p class="book-pages">295 pages</p>
        </div>

        <div id="SecondBook" class="book">
            <p class="book-title">Second Book</p>
            <hr>
            <p class="book-author">by any author</p>
            <p class="book-pages">296 pages</p>
        </div>
        <div id="ThirdBook" class="book">
            <p class="book-title">Third Book</p>
            <hr>
            <p class="book-author">by any author</p>
            <p class="book-pages">296 pages</p>
        </div>
    </div>


    <div id="add-book">
        <p id="plus">+</p>
    </div>
</div>