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

Question

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

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

代码 sn-p 在这里：

.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 代码用于 <div class="thing"> 之外的循环的开头和结尾：

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

• 在您的 .things 容器中添加justify-content: space-around; 的属性以平均分配空间。

• 不要为 .thing 容器设置宽度，请使用 flex:0 1 25%; ，其中 25% 将是 .thing 容器的宽度，您还可以将其设置为以 px 为单位的绝对值，并且会在可以换行时换行'不再在同一行进行调整。如果将“0”更改为“1”，则可以让它们拉伸到不均匀的尺寸。

.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;
}

<div class="things">
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  
</div>

Answer 2

您必须使用justify-content:space-around 为父项.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;
}

<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>