Given a horizontal list, what is the practical difference between:
display: inline-block.and
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?
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.
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.