Question

我有一个我想要显示的项目列表，我使用了flex-wrap。

但我的问题是列（在第一列之后）在剩余空间的中心对齐，而不是粘在第一列。

＆＃13;

.items {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 500px;
}

.items .item {
  font-size: 5rem;
  border: 1px solid grey;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
  width: 20rem;
  text-align: center;
}

＆＃13;

<div class="items">
  <div class="item">
    #1
  </div>
  <div class="item">
    #2
  </div>
  <div class="item">
    #3
  </div>
  <div class="item">
    #4
  </div>
  <div class="item">
    #5
  </div>
</div>

＆＃13;

https://codepen.io/anon/pen/oyjmaV

任何解决问题的想法？

Answer 1

发生这种情况的原因是因为Flex容器的初始设置设置为private Vector3 GetCatmullRomPosition(float t, Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float alpha = 0.5f) { float dt0 = GetTime(p0, p1, alpha); float dt1 = GetTime(p1, p2, alpha); float dt2 = GetTime(p2, p3, alpha); Vector3 t1 = ((p1 - p0) / dt0) - ((p2 - p0) / (dt0 + dt1)) + ((p2 - p1) / dt1); Vector3 t2 = ((p2 - p1) / dt1) - ((p3 - p1) / (dt1 + dt2)) + ((p3 - p2) / dt2); t1 *= dt1; t2 *= dt1; Vector3 c0 = p1; Vector3 c1 = t1; Vector3 c2 = (3 * p2) - (3 * p1) - (2 * t1) - t2; Vector3 c3 = (2 * p1) - (2 * p2) + t1 + t2; Vector3 pos = CalculatePosition(t, c0, c1, c2, c3); return pos; } private float GetTime(Vector3 p0, Vector3 p1, float alpha) { if(p0 == p1) return 1; return Mathf.Pow((p1 - p0).sqrMagnitude, 0.5f * alpha); } private Vector3 CalculatePosition(float t, Vector3 c0, Vector3 c1, Vector3 c2, Vector3 c3) { float t2 = t * t; float t3 = t2 * t; return c0 + c1 * t + c2 * t2 + c3 * t3; }，然后填充整个剩余空间。

您可以添加align-content: stretch来覆盖此默认行为。

更新了Codepen：https://codepen.io/anon/pen/wXKOQy

禁用flex wrap间距

1 个答案: