CSS 砌体不工作；所有弹性元素都排成一行

Question

我的 CSS 砖石结构根本不起作用。到目前为止，我已经看到数百个网站告诉您如何执行此操作，但没有一个网站有效。我已经尝试解决这个问题大约一个星期了，非常感谢您的帮助。

信息

使用 HTML 和 CSS。通过 Django 加载砌体中项目的内容（在 Python 中）。

约束条件

虽然这并不是真正的限制，但首选无 JS 解决方案。但是，如果除了用 Javascript 调整某些东西之外别无他法，那也没关系。

描述

所以，问题来了：flex-wrap 根本没有将 flex 元素换行到下一行。这一切都在一条直线上，并在 x 轴上溢出页面。如果都是一条直线就不用砌了
这是我正在使用的 CSS from here:

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 600px; 
}

.item {
  width: 32%;
  margin-bottom: 2%;
}

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

HTML:

{% for book in books %}
<div class="item" style="width: {{ size.width }}px; height: min-content;">
                <img src="{{ book.thumbnail.url }}" style="width: {{ size.width }}px; height: {{ size.height }}px;">
        <div class="titlebox"><h3>{{ book }}</h3></div>
        <div class="authorbox">{{ book.author }}</div>
            <div class="clickbtndiv">
                {% if book.status == 1 %}
                    <a href="/main/rent/{{ book.code }}"><button class="clickbtn">Rent</button></a>
                {% else %}
                    <button class="clickbtn" style="width: auto !important;" onclick="Alert.render('')">Not available</button>
                {% endif %}
                <a href="/main/books/{{ book.code }}/" style="margin-left: 10px;"><button class="clickbtn">Know more</button></a>
            </div>
        </div>
{% endfor %}

如果你正在阅读这个问题，你可能是一名前端开发人员，也许你不知道 Django。 {{}}s 被替换为从后端发送的实际值。

我不知道发生了什么，自早上 7 点以来我所做的任何事情都无法修复它，因为我更像是一名后端开发人员，尽管我知道 HTML、CSS , 和 JS，这是我正在做的一种项目，所以没有前端开发人员来帮助我。

谢谢！

Answer 1

它不适用于 flex。你应该使用网格。 https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

flex 仅适用于 x 或 y 轴。

CSS 砌体不工作；所有弹性元素都排成一行

CSS masonry isn't working; all flex elements end up in one line

html

javascript

css

masonry

信息

约束条件

描述