title: Stuck between flex-end and space-between and margin
body: <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>