如何使盒子在flexbox中并排排列而不是彼此重叠？

Question

想知道为什么itemContainer并且priceContainer不会出现在彼此旁边？

我是否需要为FlexBox包含任何类型的文件？

我认为它是内置于CSS3中的.是否有标准附加组件可供使用？

.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

使两个兄弟元素彼此相邻显示的唯一必要条件是display: flex在父容器上声明.

你申请display: flex了.container.这不是父容器#itemContainer和#priceContainer.你需要申请display: flex到#orderContainer.

一个柔性格式化的内容范围有限的父/子关系.孩子们以后的后代不会接受祖先的灵活属性.

您将始终需要应用display: flex(或display: inline-flex)父元素,以便Flex属性可以处理子元素(更多详细信息).

一旦建立了flex容器,就可以使用几个默认设置.这是两个:

• flex-direction: row - 子元素(弹性项)将水平对齐
• flex-wrap: nowrap - flex项目被迫保持一条线

Flexbox是一种CSS3技术.您无需添加任何库或其他文件即可使其正常工作.它像任何其他CSS一样运行.请注意浏览器支持.