What is the purpose of flex-start and flex-end on justify-items?

问题

From what I know, justify-items is used only in CSS Grid, but there are the values of flex-start and flex-end.

For which cases they are used?

Mozilla developer - justify-items

回答1:

This is an error. The justify-items and justify-self properties do not apply in flexbox.

Consider your source of information: MDN Web Docs (formerly Mozilla Developer Network). This resource, although normally useful and reliable, nonetheless represents second hand information.

The CSS definitions on MDN pages are based on official W3C documentation. MDN contributors (people) read, filter and interpret W3C data for presentation on MDN. As a result, MDN info is subject to human error. That's the problem here.

If you go directly to the spec, you'll find the correct information:

7.1. Inline/Main-Axis Alignment: the justify-items property

This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

Okay. So let's go to justify-self.

6.1. Inline/Main-Axis Alignment: the justify-self property

Applies to: block-level boxes, absolutely-positioned boxes, and grid items

As noted, justify-items and justify-self do not apply to flex items.

Also note that justify-items and justify-self are applicable to multiple box models, not just CSS Grid. For more details see the CSS Box Alignment Module specification.

来源：https://stackoverflow.com/questions/49474480/what-is-the-purpose-of-flex-start-and-flex-end-on-justify-items