Question

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

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

使两个兄弟元素彼此相邻显示的唯一必要条件是在父容器上声明let s: String = "This is a " if let result = (s as NSString) .stringByApplyingTransform( String(kCFStringTransformToUnicodeName), reverse: false) { print(result) }。

您已将display: flex应用于display: flex。这不是.container和#itemContainer的父容器。您需要将#priceContainer应用于display: flex。

flex formatting context的范围仅限于父/子关系。孩子们以后的后代不会接受祖先的弹性属性。

您始终需要将#orderContainer（或display: flex）应用于父元素，以便Flex属性可以对子元素进行处理（more details）。

一旦建立了Flex容器，就会有几个默认设置发挥作用。这是两个：

display: inline-flex - 子元素（弹性项目）将水平对齐
flex-direction: row - Flex项目被强制保留在一行

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

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

1 个答案: