Difference between display:block and align-self: stretch?

Hi everyone,

I was wondering what the difference between display: block and align-self: stretch is. The two behave exactly the same imo.

Thanks!
Beiti.

E.g. example 1:

#stretch-block {
  align-self: stretch;
  max-width: 100%;
  min-width: 100px;

Example 2:

#stretch-block {
  display: block;
  max-width: 100%;
  min-width: 100px;
}

The align-self property only applies to:

Applies to flex items, grid items, and absolutely-positioned boxes

per the Mozzila docs.

So if you were to use the align-self rule it wouldn’t be recognized by the browser unless display: flex; or display: grid; were in use.

I hope this is what you were looking for!

1 Like

Good point, thanks. I wasn’t thinking about having a display: flex active.

1 Like