How to align flex items horizontally?

Question

Flexbox

How to align flex items horizontally? To get it like this:

I'm trying to use the flex-direction: row property, but for some reason it does not help achieve the desired result.

https://codepen.io/kiskiskit/pen/QWEWRrx

Answer 1

Use the flex-line property align-items: centeror on the child element align-self: center. Works for both rows and columns.
It will not work on nested elements (picchi in this case), this will require a little more tricks.