我有以下布局,其中填充了一个包含代表团队成员的圆圈的 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>
最佳答案
您的 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>
在您的列方向容器中,一列中只能容纳两个圆圈。下一个包装。
一旦有了换行,容器就有了多条 flex 线,需要align-content
让它们居中。你已经有了这个。这就是 >=3 起作用的原因。
但是当只有一两个圆圈时,只有一根flex线,align-content
没有作用。这就是为什么 1 和 2 圆圈不居中的原因。您需要 align-items
将单行 flex 容器中的元素居中。
这里有一个更完整的解释:
关于html - flex 元素不居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46699101/