Given you want to center an element horizontally. Which one would you prefer?
.parent {
display: flex;
flex-direction: column;
align-items: center;
}
or
.parent {
display: flex;
justify-content: space-around;
}
Given you want to center an element horizontally. Which one would you prefer?
.parent {
display: flex;
flex-direction: column;
align-items: center;
}
or
.parent {
display: flex;
justify-content: space-around;
}
For further actions, you may consider blocking this person and/or reporting abuse
OpenSource -
Ben Halpern -
Rajesh Kumar Yadav -
Vinod Kumar -
Top comments (5)
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 ofalign-items: center; justify-content: center;
.Cool! That's new to me. Doesn't seem to be widely supported yet, unfortunately.
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!
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.
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!