Why does flexbox has no justify items and justify self properties in css

CSS Flexbox is a powerful tool for arranging elements on a page, providing a set of properties for aligning and distributing child elements within a container. For alignment in Flexbox, we primarily use the following properties:

• justify-content: Aligns flex items along the main axis.
• align-items: Aligns flex items along the cross axis.
• align-self: Allows individual flex items to have different alignment from the container's align-items property.

In CSS Grid layout, properties like justify-items and justify-self are available. They align grid items within the grid container along the main axis (row axis) and allow individual grid items to have different alignment settings from the container's justify-items property.

However, Flexbox lacks justify-items and justify-self properties. The reasons are as follows:

1. Main axis alignment controlled by justify-content: In Flexbox, main axis alignment (horizontal or vertical) is managed by justify-content, which affects the alignment of all child elements within the container. This treats all child elements as a single unit for spacing and distribution along the main axis.

2. Controlling individual child elements on the main axis: To adjust the position of individual child elements along the main axis, use margin properties such as margin-left, margin-right, etc., or the shorthand margin, which allows pushing or pulling elements to modify their placement.

3. Cross-axis alignment: For the cross axis, Flexbox provides align-items to control the default alignment of all child elements and align-self to allow individual elements to have their own cross-axis alignment. This is similar to Grid's justify-self property but applied to the cross axis instead of the main axis.

Therefore, in Flexbox design, justify-content, align-items, and align-self are sufficient for controlling alignment and distribution along both axes. The properties justify-items and justify-self are not necessary in the Flexbox context, as other properties cover their functionality. Moreover, Flexbox is designed for one-dimensional layouts, while Grid is intended for more complex two-dimensional layouts, which explains why Grid offers more detailed alignment control properties.

I've just found my own solution to this problem, or at least to my specific issue. I'm using justify-content: space-around instead of justify-content: space-between;. This way, the end elements will not stick to the top and bottom, and if needed, you can have custom margins.

This was asked on the www-style mailing list, and Tab Atkins (spec editor) provided an answer explaining the reason. I will elaborate on this here.

First, assume that our Flex container is single-line (flex-wrap: nowrap). In this case, there is a clear distinction in alignment between the main axis and cross axis: multiple items are stacked along the main axis, but items are aligned individually along the cross axis. Therefore, having a customizable per-item "self-alignment" along the cross axis is meaningful (since each item is aligned individually), but it is not meaningful along the main axis (since items are collectively aligned there).

For multi-line Flexbox, the same logic applies to each "Flex Line". In a given line, items are aligned individually along the cross axis, rather than collectively along the main axis.

Another way to put it: Therefore, all *-self and *-content properties are about how to distribute extra space around the items. The key difference is that the *-self version applies when there is only one item on the axis, while the *-content version applies when there may be multiple items on the axis. A single-item scenario and a multi-item scenario are different problems, so they have different available options—for example, the space-around and space-between values are meaningful for *-content, but invalid for *-self.

So: along the main axis of a flex container, there is extra space to distribute. Therefore, the *-content property is meaningful there, but not the *-self property.

Conversely, along the cross axis, we have both *-self and *-content properties. One (e.g., align-content) determines how to distribute space around multiple flex lines, while the other (e.g., align-self) determines how to distribute space around individual flex items within a given line along the cross axis.

(I ignore the *-items properties here, as they are just defaults for *-self.)