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

By setting display to inline-block each child get margin-right of 4px by default and default alignment would be by content. but after changing defaults they can be similar, i think you should decide by how you want to change the component in different situations, like in mobile or if you want to change it a little to use somewhere else. I personally recommend using flexbox, because its easier to maintain.

Answer 2

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.