How to make boxes align side-by-side instead of on top of each other in flexbox?

Question

Wondering why the itemContainer and priceContainer won\'t show up next to each other?

Do I need to include any kind of file for FlexBox?

Answer 1

The only thing necessary to make two sibling elements show up next to each other is declare display: flex on the parent container.

You've applied display: flex to .container. This is not the parent container of #itemContainer and #priceContainer. You need to apply display: flex to #orderContainer.

A flex formatting context is limited in scope to a parent / child relationship. Descendants beyond the children will not accept flex properties from an ancestor.

You will always need to apply display: flex (or display: inline-flex) to parent elements in order for flex properties to work on the children (more details).

---

Once you've established the flex container, several default settings come into play. Here are two:

• flex-direction: row - child elements (flex items) will align horizontally
• flex-wrap: nowrap - flex items are forced to stay in a single line

---

Flexbox is a CSS3 technology. You don't need to add any library or other file to make it work. It runs like any other CSS. Just be aware of browser support.