Flexbox: flex-start, self-start, and start; What's the difference?

Question

I just noticed some values of the align-self property that I haven\'t seen before. What are start, end, self-start, and

Answer 1

flex-start takes into account the presence of the -reverse values of the flex direction, while start does not.

For example, in a left-to-right writing mode with a flex container set to flex-direction:row-reverse, justify-content:start would cause all items to be justified to the left, while justify-content:flex-start would cause all items to be justified to the right.

div {
  padding: 4px;
  border: 1px solid red
}

#div1 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start
}

#div2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start
}

  
align-content: start
    

      
Flex 1
      
Flex 2
    
  
  

  
align-content: flex-start
    

      
Flex 1
      
Flex 2
    
  

Edit on Jul 15 2019

The described different behaviour is true in Firefox browser (at least until 68), while in Chrome, as noted in comment by diachedelic, both properties work in the same way