Align items horizontally in center and right using flex/grid

[byhbt]

Problem:

Solution:

https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements

Lesson:

What is flex: 1?
What is flex-grow: 1?

[byhbt]

If we use flex then have to use padding to compensate with the right item. so finally we use grid, as the Method #5 in this link:

https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements

[byhbt]

Before i plan to use and empty div before the [1,2,3] but it seems not elegant solution,

"Do NOT use empty tags for UI effect rendering. Use CSS (especially pseudo-selectors before and after) to render those effects."

From: https://compass.nimblehq.co/development/code-conventions/html/