In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

Mobile Technologies Mobile Computing 2 years ago

0 1 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating
_x000D_ _x000D_ Consider the main axis and cross axis of a flex container:                                                                                                                        Source: W3C To align flex items along the main axis there is one property: justify-content To align flex items along the cross axis there are three properties: align-content align-items align-self In the image above, the main axis is horizontal and the cross axis is vertical. These are the default directions of a flex container. However, these directions can be easily interchanged with the flex-direction property. /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; (The cross axis is always perpendicular to the main axis.) My point in describing how the axes' work is that there doesn't seem to be anything special about either direction. Main axis, cross axis, they're both equal in terms of importance and flex-direction makes it easy to switch back and forth. So why does the cross axis get two additional alignment properties? Why are align-content and align-items consolidated into one property for the main axis? Why does the main axis not get a justify-self property? Scenarios where these properties would be useful: placing a flex item in the corner of the flex container #box3 { align-self: flex-end; justify-self: flex-end; } making a group of flex items align-right (justify-content: flex-end) but have the first item align left (justify-self: flex-start) Consider a header section with a group of nav items and a logo. With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes. in a row of three flex items, affix the middle item to the center of the container (justify-content: center) and align the adjacent items to the container edges (justify-self: flex-start and justify-self: flex-end). Note that values space-around and space-between on justify-content property will not keep the middle item centered in relation to the container if the adjacent items have different widths. _x000D_ _x000D_ #container {_x000D_ display: flex;_x000D_ justify-content: space-between;_x000D_ background-color: lightyellow;_x000D_ }_x000D_ .box {_x000D_ height: 50px;_x000D_ width: 75px;_x000D_ background-color: springgreen;_x000D_ }_x000D_ .box1 {_x000D_ width: 100px;_x000D_ }_x000D_ .box3 {_x000D_ width: 200px;_x000D_ }_x000D_ #center {_x000D_ text-align: center;_x000D_ margin-bottom: 5px;_x000D_ }_x000D_ #center > span {_x000D_ background-color: aqua;_x000D_ padding: 2px;_x000D_ }_x000D_
_x000D_ TRUE CENTER_x000D_
_x000D_ _x000D_
_x000D_
_x000D_
_x000D_
_x000D_
_x000D_ _x000D_

note that the middle box will only be truly centered if adjacent boxes are equal width

_x000D_ _x000D_ jsFiddle version As of this writing, there is no mention of justify-self or justify-items in the flexbox spec. However, in the CSS Box Alignment Module, which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, there is this:                                                                                                                         Source: W3C You'll notice that justify-self and justify-items are being considered... but not for flexbox. I'll end by reiterating the main question: Why are there no "justify-items" and "justify-self" properties?

Posted on 16 Aug 2022, this text provides information on Mobile Computing related to Mobile Technologies. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago
_x000D_ I know this doesn't use flexbox, but for the simple use-case of three items (one at left, one at center, one at right), this can be accomplished easily using display: grid on the parent, grid-area: 1/1/1/1; on the children, and justify-self for positioning of those children. _x000D_ _x000D_
_x000D_
_x000D_
_x000D_
_x000D_
_x000D_ _x000D_

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Important Mobile Technologies Links