search

byhbt / til

Today I learn
1 stars 0 forks source link

Align items horizontally in center and right using flex/grid #2

Open byhbt opened 4 years ago

byhbt commented 4 years ago

Problem:

Untitled drawing

Solution:

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

Lesson:

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

byhbt commented 4 years ago

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 commented 4 years ago

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/