Question

我正在尝试制作一个布局，其中div段的段落从左到右包裹，每个都有固定的宽度。像这样的东西：

然而，我得到的是这个，不知何故，flex项目堆叠在左边：

此处的代码段：

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.thing {
  padding: 10px;
  margin: 10px;
  width: 300px;
}

<div class="things">
  <div class="thing">
    {% for thing in things %}  <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
    {% endfor %}
  </div>
</div>

它与Django模板中的样式有关吗？

Answer 1

您可能需要进行的更改如下：

首先，因为你正在使用for循环生成具有标题，描述等的每个东西，所以你需要将你的Django代码用于{{1之外的循环的开头和结尾as：
```
<div class="thing">
```
在.things容器中添加{% for thing in things %} <div class="thing">  <h2>{{ thing.title }}</h2> <p>{{ thing.content }}</p> <small>{{ thing.date }}</small> </div> {% endfor %}的属性，以均匀分配空间。
而不是设置.thing容器的宽度使用justify-content: space-around;，其中25％将是.thing容器的宽度，您也可以将其设置为px中的绝对值，它将在他们无法在同一行调整。如果将“0”更改为“1”，则可以将它们拉伸到不均匀的尺寸。

flex:0 1 25%;

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-flow:row wrap;
  display: flex;
  justify-content: space-around;
}

.thing {
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:0 1 25%;
  background:red;
}

Answer 2

您必须使用.things为父项flex-basis:25%和.thing创建项目空间，以便将初始长度设置为子项.things { font: 13px Verdana; display: flex; flex-wrap: wrap; justify-content: space-around; box-sizing: border-box; } .thing { flex-basis: 25%; padding: 10px; background: cadetblue; text-align: center; box-sizing: border-box; border: 2px solid #fff; }。

＆＃13;

<div class="things">
  <div class="thing">
    <h2>Title 1</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 2</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 3</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 4</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 5</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 6</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

如何使弹性项目以固定宽度包裹

2 个答案: