Why is justify-self not working at certain widths?
I have a simplified non-working example at https://codepen.io/thejgc/pen/zxqvzOa of a grid layout.
At most widths it works fine, with the
preText class (here with added blue highlighting) is right-aligning its content nicely with justify-self: end;.
But when the window is narrowed, and the text in the class has to wrap, the alignment seems to stop working.
I have tried justify-self: flex-end; and justify-self: self-end; as well, but neither work.
What am I missing?
3 Replies
justify-self is for the container. For the contents (text) you need to add text-align:right.Thanks, yes I see now. I was thinking
text-align was deprecated when using grid.
So, for belt and braces, I probably should be using both?Nope text-align is actually very important in grid! If the text wraps, text-align determins how
You can end up with text that has a left aligned wrap but sticks to the right end of the screen. It's weird looking stuff