The Difference between "flex" and "inline-flex"
Short answer:
One is inline and the other basically responds like a block element(but has some of it's own differences).
Longer answer:
Inline-Flex - The inline version of flex allows the element, and it's children, to have flex properties while still remaining in the regular flow of the document/webpage. Basically, you can place two inline flex containers in the same row, if the widths were small enough, without any excess styling to allow them to exist in the same row. This is pretty similar to "inline-block."
Flex - The container and it's children have flex properties but the container reserves the row, as it is taken out of the normal flow of the document. It responds like a block element, in terms of document flow. Two flexbox containers could not exist on the same row without excess styling.
The problem you may be having
Due to the elements you listed in your example, though I am guessing, I think you want to use flex to display the elements listed in an even row-by-row fashion but continue to see the elements side-by-side.
The reason you are likely having issues is because flex and inline-flex have the default "flex-direction" property set to "row." This will display the children side-by side. Changing this property to "column" will allow your elements to stack and reserve space(width) equal to the width of its parent.
Below are some examples to show how flex vs inline-flex works and also a quick demo of how inline vs block elements work...
display: inline-flex; flex-direction: row;
Fiddle
display: flex; flex-direction: row;
Fiddle
display: inline-flex; flex-direction: column;
Fiddle
display: flex; flex-direction: column;
Fiddle
display: inline;
Fiddle
display: block
Fiddle
Also, a great reference doc:
A Complete Guide to Flexbox - css tricks