Hacker News Reader

things like justify-content, align-content, align-items, align-self confuse me, they change based on block and inline settings and the naming is also too indistinct. in the end i just find it frustrating.

sometimes miss the days of table layouts.

i think flex and grid are fine if you stick to the basics. but when you start having nested elements and things like display: content. things can become unmanageable.

View on HN

In Chrome DevTools, I just enter the required value (center/end) and scroll through the suggested properties until the desired effect is achieved. No need to remember them.

This is exactly how I do it too but I'm not too proud about it. I can propose index changes in a postgres db and explain the reason behind performance improvements but I can't remember the CSS properties that'd put my content in the correct boxes.

You can also click on the little “flex” icon next to the display: flex property and bring up a ui that has all the flex properties (if, like me you can’t remember what property does what)

The naming is super annoying, but for Grid it is least a consistent mapping:

- align-* is inline axis.

- justify-* is block axis.

- *-content is aligning grid tracks (rows/columns).

- *-items is aligning individual children within their grid area.

i find it hard to remember that.

Reply on news.ycombinator.com