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

Posted 2023-02-24

【中文标题】如何使弹性项目以固定宽度包裹

【英文标题】：How to make flex items wrap with a fixed width

【发布时间】：2018-05-26 07:47:40

【问题描述】：

我正在尝试制作一个布局，其中 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 模板中的样式有关吗？

【问题讨论】：

sn -p 不显示问题

你的代码其实没有问题。我用小提琴（jsfiddle.net/m0nk3y/f05xhv4b）试了一下，效果很好。你甚至不需要做flex-flow: row wrap; 你可以做flex-flow: wrap。它们正在包装，因为容器的宽度不足以容纳多个.thing

使.thing 成为弹性容器，而不是.things。 ***.com/q/37840646/3597276

【参考方案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>

【讨论】：

你是对的，问题是我应该把for循环放在整个div之外。 .我也试过 <1>

【参考方案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>

【讨论】：

在发布此内容之前，我实际上尝试了您的建议。问题是我把for循环放错了。还是谢谢。