title: CSS Flex-box justify-self / align-self not working
body: <p>I have a component in React using <a href="https://react.semantic-ui.com/" rel="nofollow noreferrer">Semanti UI react</a></p>
  
  <p>I am trying to justify a single container to the flex-end but it's not working</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Item  key={item._id} id={item._id}&gt;
             &lt;img className="image" src={item.imageURL} alt="Project Canvas"/&gt;
             &lt;div className="content"&gt;
                &lt;div className="title"&gt;{item.title}&lt;/div&gt;
                &lt;Item.Meta&gt;
                  {new Date(item.createdDate).toUTCString()}
                &lt;/Item.Meta&gt;
                &lt;Item.Description&gt;{item.description}&lt;/Item.Description&gt;
                &lt;div className="footer"&gt;
                  &lt;Button primary floated='right' href={item.workURL} target="_blank"&gt;
                    Go to application
                    &lt;Icon name='right chevron' /&gt;
                  &lt;/Button&gt;
                  &lt;Label color='teal' tag&gt; React &lt;/Label&gt;
                &lt;/div&gt;
             &lt;/div&gt;
           &lt;/Item&gt;
  
  </code></pre>
  
  <p>the component that I am trying to flex-end is the <strong>&lt; div class="footer"></strong></p>
  
  <p>My CSS  </p>
  
  <pre class="lang-css prettyprint-override"><code>
  .content{
    margin: 1vh !important;
    display: flex !important;
    flex-direction: column !important;
  
  }
  
  .footer{
    padding-top: 2vh !important;
    border-top: 1px solid rgba(0,173,181,1) !important;
    justify-self: flex-end !important;
    align-self: flex-end !important;
  
  }
  
  </code></pre>
  
  <p>the justify-self  and align-self doesn't work</p>