title: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
body: <p>Consider the main axis and cross axis of a flex container:</p>
  <p><a href="https://i.stack.imgur.com/9Oxw7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9Oxw7.png" alt="An illustration of the various directions and sizing terms as applied to a row flex container" /></a>
  <sub>Source: <a href="https://www.w3.org/TR/css-flexbox-1/#box-model" rel="noreferrer">W3C</a></sub></p>
  <p>To align flex items along the main axis there is one property:</p>
  <ul>
  <li><a href="https://www.w3.org/TR/css-flexbox-1/#justify-content-property" rel="noreferrer"><code>justify-content</code></a></li>
  </ul>
  <p>To align flex items along the cross axis there are three properties:</p>
  <ul>
  <li><a href="https://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="noreferrer"><code>align-content</code></a></li>
  <li><a href="https://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="noreferrer"><code>align-items</code></a></li>
  <li><a href="https://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="noreferrer"><code>align-self</code></a></li>
  </ul>
  <p>In the image above, the main axis is horizontal and the cross axis is vertical. These are the default directions of a flex container.</p>
  <p>However, these directions can be easily interchanged with the <a href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="noreferrer"><code>flex-direction</code></a> property.</p>
  <pre><code>/* main axis is horizontal, cross axis is vertical */
  flex-direction: row;
  flex-direction: row-reverse;
  
  /* main axis is vertical, cross axis is horizontal */    
  flex-direction: column;
  flex-direction: column-reverse;
  </code></pre>
  <p>(The cross axis is always perpendicular to the main axis.)</p>
  <p>My point in describing how the axes' work is that there doesn't seem to be anything special about either direction. Main axis, cross axis, they're both equal in terms of importance and <code>flex-direction</code> makes it easy to switch back and forth.</p>
  <p><em>So why does the cross axis get two additional alignment properties?</em></p>
  <p><em>Why are <code>align-content</code> and <code>align-items</code> consolidated into one property for the main axis?</em></p>
  <p><em>Why does the main axis not get a <code>justify-self</code> property?</em></p>
  <hr />
  <p>Scenarios where these properties would be useful:</p>
  <ul>
  <li><p>placing a flex item in the corner of the flex container<br>
  <code>#box3 { align-self: flex-end; justify-self: flex-end; }</code></p>
  </li>
  <li><p>making a group of flex items align-right (<code>justify-content: flex-end</code>) but have the first item align left (<code>justify-self: flex-start</code>)</p>
  </li>
  </ul>
  <p><em>Consider a header section with a group of nav items and a logo. With <code>justify-self</code> the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly (&quot;flexes&quot;) to different screen sizes.</em></p>
  <ul>
  <li>in a row of three flex items, affix the middle item to the center of the container  (<code>justify-content: center</code>) and align the adjacent items to the container edges (<code>justify-self: flex-start</code> and <code>justify-self: flex-end</code>).</li>
  </ul>
  <p><em>Note that values <code>space-around</code> and <code>space-between</code> on
  <code>justify-content</code> property  will not keep the middle item centered about the container if the adjacent items have different widths.</em></p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: flex;
    justify-content: space-between;
    background-color: lightyellow;
  }
  .box {
    height: 50px;
    width: 75px;
    background-color: springgreen;
  }
  .box1 {
    width: 100px;
  }
  .box3 {
    width: 200px;
  }
  #center {
    text-align: center;
    margin-bottom: 5px;
  }
  #center &gt; span {
    background-color: aqua;
    padding: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="center"&gt;
    &lt;span&gt;TRUE CENTER&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
    &lt;div class="box box1"&gt;&lt;/div&gt;
    &lt;div class="box box2"&gt;&lt;/div&gt;
    &lt;div class="box box3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;note that the middlebox will only be truly centered if adjacent boxes are equal width&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/7an37m20/12/" rel="noreferrer">jsFiddle version</a></p>
  <hr />
  <p>As of this writing, there is no mention of <code>justify-self</code> or <code>justify-items</code> in the <a href="https://www.w3.org/TR/css-flexbox-1/" rel="noreferrer">flexbox spec</a>.</p>
  <p>However, in the <a href="http://www.w3.org/TR/css-align-3/" rel="noreferrer">CSS Box Alignment Module</a>, which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, there is this:</p>
  <p><a href="https://i.stack.imgur.com/uu2tP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uu2tP.png" alt="enter image description here" /></a>
                                                                                                                                                     <sub>Source: <a href="https://www.w3.org/TR/css3-align/#overview" rel="noreferrer">W3C</a></sub></p>
  <p>You'll notice that <code>justify-self</code> and <code>justify-items</code> are being considered... <em>but not for flexbox</em>.</p>
  <hr />
  <p>I'll end by reiterating the main question:</p>
  <blockquote>
  <p>Why are there no &quot;justify-items&quot; and &quot;justify-self&quot; properties?</p>
  </blockquote>