Skip to content

Instantly share code, notes, and snippets.

@VizualAbstract
Last active August 19, 2021 17:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save VizualAbstract/c505fd848c69d667daea422931328eb7 to your computer and use it in GitHub Desktop.
Save VizualAbstract/c505fd848c69d667daea422931328eb7 to your computer and use it in GitHub Desktop.
justify-content vs text-align

justify-content vs text-align

Goes over the issues with using flex box to align inline elements vs block elements

Description

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.

Example

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):

Screen Shot 2021-08-18 at 4 22 14 PM

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:

Screen Shot 2021-08-18 at 4 22 27 PM

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.

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment