Goes over the issues with using flex box to align inline elements vs block elements
When table cells for header and body content utilize the flex box, they commonly use justify-content: flex-end
for aligning items to the right.
There's nothing inherently wrong with this method, as it behaves as expected when aligning block-level elements.
However, tables are made for data, and be limited to inline elements if necessary. For inline element alignment, it's best to use text-align
, such as text-align: right;
.
Otherwise, issues can arise when line-breaks occur due to width and white-space.
In the two screenshots below, you can see the behavior of justify-content vs text-align.
In the first image, it's difficult to see the differences (the top example uses justify-content
, the bottom example uses text-align
):
In the second image, you can see what happens when white space breaks the text (again, top example uses justify-content
, the bottom example uses text-align
:
The issue is a little more involved than that though, because justify-content is actually required if content isn't breaking at the white space.