Firefox中的Flexbox：项目没有正确排列[重复]答案

【问题标题】：Flexbox in Firefox: Items are not lined up properly [duplicate]Firefox中的Flexbox：项目没有正确排列[重复]
【发布时间】：2015-12-08 12:58:51
【问题描述】：

这个http://jsfiddle.net/7ra5oL77/ 应该与下面的文本水平对齐橙色点。相关项目是：

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

和

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

这在 Chrome 和 Edge 中有效，但 Firefox 似乎没有使用全宽，并且右侧有一个太大的空白。

谁能帮帮我？

【问题讨论】：

在问题中也发布您的所有 HTML 和 CSS，这样我们就不必在 StackOverflow 和 JSFiddle 之间来回跳来帮助解决您的问题 :)

标签： html css flexbox

【解决方案1】：

绝对定位的.lines 与space-around 对齐：

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

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

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

justify-content 属性与 flex items 沿 main axis flex 容器的当前行。

作为一种变通方法，您可以使用auto margins 来实现相同的效果，而不受绝对定位元素的干扰：

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

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢。我没有发布 JavaScript，但这将是一个线图，您可以在其中用鼠标将点拖动到正确的位置，这些线将点连接在一起。我现在将这些行放在一个单独的容器中，它现在也可以在 Firefox 中使用。