Horizontal list: inline-block vs flex

Question

Given a horizontal list, what is the practical difference between:

• Normal flow, with all the elements being display: inline-block.

and

• List root is display:flex; flex-flow: wrap;.

I have tested it on different sizes and haven't noticed any differences, but perhaps there are some more subtle implications, especially how the child elements resize?

Answer 1

display:flex; provides some more options concerning the alignment of the items both horizontally and vertically, and also concerning the adaption of their size: shrinking or growing in the flex-direction and aligning their size in the cross-axis direction. inline-blocks simply line up horizontally, keeping their original width and height, and align vertically according to their vertical-align parameter setting.