So, I have a parent div with two childs. I need the first in the center, and the second at the right after some d distance. Can’t seem to find how to do it with flexbox.
<--------------------[First]-d-[Second]------------->
|
Center
What worked is centering the first div, and give an absolute position and right distance to the second. But I would like to do it with only flexbox (if possible).
I’ve tried setting a left-margin with percentage (47% for example), but it is not consistent with different screen sizes and the first div go out of center.
Auto margins and justify-content also cause the first div to not be in the center. (Since it centers both divs).
2
Answers
You can use
margin
if the width is known beforehand:Try it:
…or
grid
with its powerfulgrid-template-columns
:Try it:
You can also cheat a little. Create a third empty
div
on the left, and then usespace-around
orcenter
with agap
.or