Stuck between flex-end and space-between and margin
<p>In a flexbox, when I use <code>justify-content:space-between</code> the first and last items are exactly aligned to the bounds of flex container where space is divided between them. How can I align first item to the right where other items are also aligned to the right (not to entire the width)?</p>

<p>The sample code below is not good because when I use <code>flex-end</code>, <strong>I have to set margin</strong> for items and so the first one in each row <strong>is not sticky to the right</strong>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="flexcontainer"&gt;
  &lt;div class="flexitem"&gt;&lt;/div&gt;
  &lt;div class="flexitem"&gt;&lt;/div&gt;
  &lt;div class="flexitem"&gt;&lt;/div&gt;
  &lt;div class="flexitem"&gt;&lt;/div&gt;
  &lt;div class="flexitem"&gt;&lt;/div&gt;
  &lt;div class="flexitem"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>and this is not also good because items are not aligned to the right (but entire the width):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="flexcontainer"&gt;
    &lt;div class="flexitem"&gt;&lt;/div&gt;
    &lt;div class="flexitem"&gt;&lt;/div&gt;
    &lt;div class="flexitem"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>My desired output in image (first one sticks to the right with no margin-right and the 4th one sticks to the left if 4 element exist and others align to the right if more than 4):
<a href="https://i.stack.imgur.com/dygAV.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/dygAV.jpg" alt="enter image description here"></a></p>