Which way of centering via Flex do you prefer?
#css#flexbox#opinion#discuss
Antonio Radovcic

Antonio Radovcic @niorad

About: Front-End-Developer, DevLids.com

Location:
Munich
Joined:
Jan 10, 2017

Which way of centering via Flex do you prefer?

Publish Date: Apr 24 '19
12 5

Given you want to center an element horizontally. Which one would you prefer?

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

or

.parent {
  display: flex;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Comments 5 total

  • Joel Krause
    Joel KrauseApr 25, 2019

    I’ve always used the first option but only because I didn’t know the second was possible 😂

    Gonna give that one a go when I get a chance!

    • Antonio Radovcic
      Antonio RadovcicApr 25, 2019

      Oh yes, the space-arounds are all very useful, especially for nav-bars. I think the first way is more readable since "center" is clearer than "space-around", but I'm writing the second one by default, since it's shorter and in my thinking, I try to solve for horizontal spacing first.

  • Andrei Gatej
    Andrei GatejApr 25, 2019

    I didn’t know about the second one, but I definitely should try it.

    Speaking of flexbox, I just found out today that you can use place-items: center; in place of align-items: center; justify-content: center;.

    • Antonio Radovcic
      Antonio RadovcicApr 25, 2019

      Cool! That's new to me. Doesn't seem to be widely supported yet, unfortunately.

  • Todd Stark II
    Todd Stark IIApr 25, 2019

    I've always used the second one. It never even crossed my mind to use flex-direction for that.

    I'm always happy to learn a new way to solve a problem. Thanks for bringing this up!

Add comment