When working with a flexbox and using justify-content:space-between, the first and last items are aligned to the edges of the flex container, with space distributed between them. But how can I align the first item to the right while keeping all other items aligned to the right as well (without filling the entire width)?
The sample code provided below is not ideal because when using flex-end, I have to add margin to the items which causes the first item in each row to not stick to the right edge.
#flexcontainer{
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-end;
justify-content: flex-end;
background:#ff8800;
}
.flexitem{
display: -webkit-flex;
display: flex;
margin:20px;
width:24%;
background:#666666;
box-sizing:border-box;
height:50px;
}<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>This approach is also not ideal because the items are not aligned to the right (but rather take up the entire width):
#flexcontainer{
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
background:#ff8800;
}
.flexitem{
display: -webkit-flex;
display: flex;
margin:0;
width:24%;
background:#888888;
box-sizing:border-box;
height:50px;
}<div id="flexcontainer">
<div class="flexitem"></div>
<div class="flexitem"></div>
<div class="flexitem"></div>
</div>My desired layout is depicted in this image (where the first item sticks to the right with no right margin, and the fourth item sticks to the left if there are four elements, while others align to the right for more than four elements): https://i.sstatic.net/dygAV.jpg