Die meisten Tags haben automatisch den Display-Wert block. Block-Elemente positionieren sich immer unter oder über einem benachbarten Element und sind 100% breit, so breit wie das Eltern-Element, falls man keine alternative Breite definiert.
Inline-Elemente verhalten sich wie Text entlang der Baseline. Diese Elemente übernehmen typische Boxen-Eigenschaften wie margin-bottom, margin-top, width und height NICHT! und ordnen sich wie Wörter im Textfluss nebeneinander an.
Inline-Block-Elemente verhalten sich einerseits wie Text, andererseits wie Boxen. Sie übernehmen alle Boxen-Eigenschaften, haben automatisch nur die Breite, die durch ihre Inhalte erzwungen wird und ordnen sich nebeneinander an.
IN einem Container mit der Eigenschaft display:flex; werden alle Kind-Elemente automatisch nebeneinander platziert. Außerdem können die Anordnung, die Ausrichtungen und die Höhen und Breiten dieser Elemente über weitere Flex-Eigenschaften definiert werden.
A Complete Guide to Flexbox