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?

I thought it was built into CSS3. Is there a standard add-on to utilize?

.container {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
}
#orderContainer {
  width: 15%;
  border: 1px solid #f2f2f2;
  height: 100%;
  flex-direction: row;
}
#selectionsContainer {
  width: 85%;
}
#catagoryContainer {
  width: 100%;
  height: calc(20% - 2px);
  border: 1px solid #f2f2f2;
}
#menuContainer {
  width: 100%;
  height: 80%;
  border-top: 0px;
  border: 1px solid #f2f2f2;
}
#itemContainer {
  width: 70%;
  height: 80%;
  border: 1px solid #f2f2f2;
  display: flex;
  order: 1;
}
#priceContainer {
  width: calc(30% - 2px);
  height: 80%;
  border: 1px solid #f2f2f2;
  display: flex;
  order: 2;
}

<div class="container">
  <div id="orderContainer">
    <div id="itemContainer">
      itemContainer
    </div>
    <div id="priceContainer">
      priceContainer
    </div>
  </div>

  <div id="selectionsContainer">
    <section id="catagoryContainer">
      catagoryContainer
    </section>
    <section id="menuContainer">
      menuContainer
    </section>
  </div>
</div>

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.