Question

此http://jsfiddle.net/7ra5oL77/应将橙色圆点与下方的文字水平对齐。相关项目是：

<div class="draggable ui-widget-content"></div>

和

<div class="item">60°C</div>

适用于Chrome和Edge，但Firefox似乎没有使用全宽，右侧有太大的空白区域。

任何人都可以帮助我吗？

Answer 1

我看到的问题是firefox将你的div.lines识别为flexbox中的项目，即使这是绝对的位置。如果你将它们拉出容器或完全删除它们（我没有看到它们的用途），那么你应该没问题。

Answer 2

绝对定位的.lines搞砸了space-around路线：

#graph-containment-wrapper {
  justify-content: space-around;
}

这似乎是一个错误，因为the spec说

flex container的绝对定位的孩子不会参与弹性布局。

justify-content属性沿着flex items对齐main axis Flex容器当前行的auto margins。

作为一种解决方法，您可以使用RegEx Demo来实现相同的效果，而不会受到绝对定位元素的干扰：

.draggable {
  margin: 0 auto;
}

.lines {
  padding: 0px;
  margin: 0px;
  height: 1px;
  background-color: orange;
  position: absolute;
}
.draggable {
  width: 30px;
  height: 30px;
  background: orange;
  border-radius: 30px;
  cursor: n-resize;
  top: 200px;
  z-index: 1;
  border: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 0 auto;
}
.x-axis {
  display: flex;
  justify-content: space-around;
  width: 100%
}
#graph-containment-wrapper {
  display: flex;
  height: 20rem;
  background-color: white;
}
.graph {
  -webkit-user-select: none;
}
.draw-area{
  width: 100%
}
.hlines{
  background-color: lightgray;
  width:100%;
  height: 1px;
  display: flex;
}
.hlines-container{
  display:flex;
  min-height: 100%;
  justify-content: space-between;
  flex-direction: column;
  padding: 15px;
  height: 20rem;
  margin-top: -20rem
}

<div class="graph">
  <div class="draw-area">
    <div id="graph-containment-wrapper">
      <div class="draggable ui-widget-content"></div>
      <div class="draggable ui-widget-content"> </div>
      <div class="draggable ui-widget-content"> </div>
      <div class="draggable ui-widget-content"> </div>
      <div class="draggable ui-widget-content"> </div>
      <div class="lines" id="myline0"></div>
      <div class="lines" id="myline1"></div>
      <div class="lines" id="myline2"></div>
      <div class="lines" id="myline3"></div>
    </div>
    <div class="hlines-container">
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
    </div>
  </div>
  <div class="x-axis">
    <div class="item">20°C</div>
    <div class="item">30°C</div>
    <div class="item">40°C</div>
    <div class="item">50°C</div>
    <div class="item">60°C</div>
  </div>
</div>

Firefox中的Flexbox：项目排列不正确

2 个答案: