I have the following layout which populates a containing div with a number of circles representing team members. I have an odd caveat at the moment where the intended outcome is achieved for teams consisting of >= 3
team members, however for teams which only consist of 1 || 2
members, the circles align to the far left of the container.
Why is this the case?
.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>
Your flex containers are missing align-items: center
.
Add this to your code:
.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>
In your column-direction container, only two circles can fit in a column. The next one wraps.
Once there is a wrap, the container has multiple flex lines, and align-content
is needed to center them. You have this already. That's why >=3 works.
But when there are only one or two circles, there is only one flex line and align-content
has no effect. That's why 1 & 2 circles aren't centering. You need align-items
to center the items in a single line flex container.
Here's a more complete explanation:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With