With CSS flex, how to have a different align-items per element?

Using flex, I could move my divs to different rows.
.container {
display: flex;
flex-direction: column;
}

But the rows will take the entire space horizontally.
I want align-items: flex-start for the first row, and not for the second row.

So I used align-self on the first row. And the result works.

Question 1. There is no default value for align-items? There must be one but it is not documented.
Question 2. THe default value occupies the whole space of the row. Which align-items value is used?

Thank you

In this doc it says initial value auto, which then refers to normal. But normal is said not to apply for flex layouts.

Yes there is and the initial value is ‘stretch’.

https://www.w3.org/TR/css-flexbox-1/#align-items-property

Yes that’s the default value of ‘stretch

Normal is a value for the justify-self property and its behaviour varies depending on layout mode and is a little complex as it depends on a number of circumstances.

https://www.w3.org/TR/css-align-3/#propdef-justify-self

Normal and auto behave the same in some circumstances and represent the default alignment for the layout mode.

In most simple cases you probably do not need to be concerned with all the finer details but know that the rules will depend on situation.

That would assume that the first item is only content width but all remaining items will stretch full-width. If that’s what you wanted then all well and good :slight_smile:

1 Like

OK thanks.

The MDN documentation is so good that I completely forgot that the CSS specification is more reliable and complete. The information was on MDN. I just confused the 2 CSS properties align-self and align-items.

The following is out of subject, except perhaps concerning MDN as a source of information.
I have been reading about Progressive Web APPs on MDN. Excellent reading. Though, the specifications would be more complete.

Note: WPAs have limited support on Safari for iOS.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.