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

The values flex-end and flex-start (among others) were created for use with flex layout.

However, the W3C has been developing the Box Alignment Module, which establishes a common set of alignment properties and values for use across multiple box models, including flex, grid, table and block.

So what you're seeing are the newer values that will eventually replace the existing layout-specific values.

Here's how it's described in the flexbox specification:

§ 1.2. Module interactions

The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.

There's similar language in the Grid specification. Here's an example:

§ 10.1. Gutters: the row-gap, column-gap, and gap properties

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns. Their syntax is defined in CSS Box Alignment 3 §8 Gaps Between Boxes.

The original properties – grid-row-gap, grid-column-gap and grid-gap – didn't last long. Although, for the sake of backward compatibility, I'm sure they're still respected.