The first ingredient you need in a Flexbox layout is a parent element whose display property has been set to flex:
This parent is sometimes called the flex parent. A nice feature of Flexbox is that most of the properties are set on the flex parent. The flex children often don't need any special Flexbox properties set.
Background colors have been added to both the children and parent to make their boxes visible.
Notice how the parent fills its line. That tells you that an element whose display property has been set to flex is a block element.
Notice also how the default Flexbox layout packs element tightly at the start of the parent. Some margin and padding would give the elements some breathing room:
See how the margins between the children aren't collapsed? The gap between elements is twice as wide as the gap on the far left. Flexbox layouts follow different rules than the normal flow. The span elements also have vertical margin. That should surprise you, because inline elements don't have vertical margin in normal flow.
The children appear in a horizontal row. That's because a flex parent's main axis points horizontally by default. You can make this explicit using the flex-direction property:
Try changing the main axis to column. Whether you want a horizontal or vertical layout depends on the interface you are trying to build. Buttons often appear in vertical columns. Navigation links often appear in horizontal rows.