Flexbox: flex-start/flex-end, self-start/self-end, and start/end; 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 self-end and what are their differences from flex-start and flex-end?

I've been referring to the guide at CSS-Tricks often when I work with flexbox, but it doesn't mention these values. I read the documentation for align-self at MDN, but the one-line description of the values isn't enough for me to understand.

I thought I might be able to play around with the values to figure it out, but they all seem to do the same thing...

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: papayawhip;
  width: 400px;
  height: 200px;
  margin: 1rem auto;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
}

.block {
  color: white;
  font-size: 3em;
  font-family: sans-serif;
  padding: 0.5rem;
  margin: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-1 {
  background: red;
}

.block-2 {
  background: orange;
}

.block-3 {
  background: gold;
}

.block-4 {
  background: green;
}

.block-5 {
  background: blue;
}

.block-2 {
  align-self: flex-start;
}

.block-3 {
  align-self: start;
}

.block-4 {
  align-self: self-start;
}

<div class="container">
  <div class="block block-1">1</div>
  <div class="block block-2">2</div>
  <div class="block block-3">3</div>
  <div class="block block-4">4</div>
  <div class="block block-5">5</div>
</div>

Rawdin

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.

Ivett

I think that puts me on the right path. I definitely have some reading to do. After I posted the question I also found Box alignment in CSS Grid Layout at MDN, which I think is based on the documentation you linked to. – Rawdin

We will see how the original grid-gap properties survive in the sub-grid version of the spec being worked on now... – Caprifoliaceous

Worth mentioning the checkered browser support for start and end, three years after this question was asked. While align-self support is pretty good (93.6%), align-items: start and end is only supported by Firefox and Opera (4.4% as of July 2021). – Transmigrate

@Transmigrate Support for these keywords shipped in Chrome 93 a few months ago. They are implemented in WebKit trunk and will most likely be present in the next major Safari release. – Capacious

Answer 2

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
}

<ul>
  <li><code>align-content: start</code>
    <div id=div1>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
  <br>
  <li><code>align-content: flex-start</code>
    <div id=div2>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
</ul>

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

Edit on Aug 2 2023

Chrome 115 now matches the same behaviour as Firefox, as noted in comment by Snailedlt. I'm not sure when Chrome updated their behaviour.

Hijack

Running the code snippet on chrome it looks different between start and flex-start, so maybe add another edit explaining that? Here's how it looks now (Chrome Version 115.0.5790.110 (Official Build) (64-bit)) : i.imgur.com/rcrmkbe.png – Erleena

Does this apply to the justify-content only? I have tried to reproduce the example with flex-direction: column-reverse + align-items: start/flex-start, but was not able to do so. Instead of having elements on top of the column and then on the bottom after changing start to flex-start I got these at the same position. I have tried to add the sizes (both width and height) to the containers and elements, but still no luck. Am I doing it wrong, or there is no difference between start/flex-start for cross-axis alignment? – Translocation

Answer 3

The accepted answer here is partially incorrect: the newer properties are not meant to replace the older flex-start and flex-end. They have slightly different purposes.

• flex-start and flex-end align flex items at the start or end of the flexbox's axis: the main axis for justify-x properties or the cross axis for align-x properties. These axes are manipulated by flex-direction and/or flex-wrap: wrap-reverse.
• start and end align flex items at the start or end of the direction text flows in the writing mode of the flex container, regardless which way the flexbox is aligned.
• self-start and self-end align flex items at the start or end of the direction text flows in the writing mode of the individual flex item. This means they’re generally only needed if you are mixing different writing modes/languages on the page.

This means if you have a flexbox with flex-direction: row-reverse (flowing right to left), justify-content: flex-start will justify flex items to the right, but justify-content: start will justify flex items to the left — all assuming a left-to-write writing mode such as English.

---

For reference:

• justify-content accepts: flex-start, flex-end, start, end, left, and right values (plus center, space-between, etc.).
• align-items and align-self accept: flex-start, flex-end, start, end, self-start, self-end values (plus center, stretch, baseline)
• align-content accepts: flex-start, flex-end, start, and end values (plus center, stretch, space-between, etc)

If these uses of "start" and "end" and writing modes are new to you, it’s worth reading up briefly on logical properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

Zebedee

Answer 4

Rachel Andrew's https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/ is exactly the best answer for this question I think.

She wrote this around the same time Chrome started supporting these properties in July 2021.

The key graf is

start and end are flow relative, and relate to the writing mode and script direction. The self-start and self-end values are also flow-relative but they relate to the writing mode and direction of the alignment subject, in this case a flex item.

Multifid

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Acetone