弹性项目没有居中

Posted

技术标签:

【中文标题】弹性项目没有居中【英文标题】：flex items are not centering 【发布时间】：2018-03-23 18:30:23 【问题描述】：

我有以下布局，它填充了一个包含多个圆圈的 div，这些圆圈代表团队成员。对于由>= 3 团队成员组成的团队，我有一个奇怪的警告，但对于仅由1 || 2 成员组成的团队，圆圈与容器的最左侧对齐。

为什么会这样？

.fireteam 
  padding: 0 5px;


.fireteam>p 
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 0.1rem;


.fireteam #fireteamMembers 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height: 4.2rem;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;


.fireteam .fireteamMember 
  width: 1.5rem;
  height: 1.5rem;
  background: #000;
  color: white;
  border-radius: 50%;
  margin: 0.25rem;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>

【问题讨论】：

所以我随机回到了这篇文章......我不确定这里的 CSS 规则是否发生了变化，但我之前损坏的示例现在似乎没有任何变化？ :S 【参考方案1】：

您的弹性容器丢失了align-items: center。

将此添加到您的代码中：

.fireteam #fireteamMembers 
  align-items: center; /* NEW */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height: 4.2rem;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;



.fireteam 
  padding: 0 5px;


.fireteam>p 
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 0.1rem;


.fireteam #fireteamMembers 
  align-items: center; /* NEW */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height: 4.2rem;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;


.fireteam .fireteamMember 
  width: 1.5rem;
  height: 1.5rem;
  background: #000;
  color: white;
  border-radius: 50%;
  margin: 0.25rem;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>
<div class="fireteam col-xs-4">
  <p>name</p>
  <label>X members</label>
  <ul id="fireteamMembers">
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
    <li class="fireteamMember"></li>
  </ul>
</div>

在您的列方向容器中，一列中只能容纳两个圆圈。下一个包裹。

一旦有一个环绕，容器就会有多个伸缩线，需要align-content 将它们居中。你已经有了这个。这就是 >=3 有效的原因。

但是当只有一两个圆圈时，只有一根柔线，align-content 没有效果。这就是为什么 1 和 2 圈没有居中的原因。您需要 align-items 将项目置于单行 flex 容器的中心。

这里有一个更完整的解释：

How does flex-wrap work with align-self, align-items and align-content?

【讨论】：

啊，你做得很好！感谢那！我知道它很接近。

以上是关于弹性项目没有居中的主要内容，如果未能解决你的问题，请参考以下文章

在两个不同宽度的弹性项目之间水平居中弹性项目[重复]

如何使弹性容器居中但左对齐弹性项目

如何使弹性容器居中但左对齐弹性项目

如何垂直居中弹性框项目的内容

如何在弹性项目中垂直居中文本？

居中弹性项目，行尾有一个[重复]