flex项目不居中

时间：2017-10-11 23:33:55

标签： html css css3 flexbox centering

我有以下布局，用一个代表团队成员的圆圈填充一个包含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>

1 个答案:

答案 0 :(得分：2)

您的Flex容器丢失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来使它们居中。你已经有了。这就是＆gt; = 3的原因。

但是当只有一个或两个圆圈时，只有一条柔性线，而align-content没有效果。这就是为什么1＆amp; 2个圆圈不居中。您需要align-items将项目置于单行灵活容器中心。

以下是一个更完整的解释：

相关问题
最新问题