Question

所以，我遇到了一个问题，就是我的flexbox大部分都可以工作，除了两列并排且行不齐的情况。对于我一生，我不知道为什么它不起作用。

这是现在的屏幕截图： http://prntscr.com/ndig4v（以照光拍摄）

这是HTML：

/* Stats */
#stats-container {
  width: 100%;
  height: 100%;
  border: 1px black solid;
}
#free-stats {
  width: 100%;
  height: 45%;
  border: 1px black solid;
}
#stats-column-one,
#stats-column-two {
  display: flex;
  flex-direction: column;
}
#stats-column-one {
  width: 75%;
}
#stats-column-two {
  width: 25%;
}
#stats-flex-one,
#stats-flex-two {
  display: flex;
  flex-direction: row;
}
#str-row,
#end-row,
#dex-row,
#eva-row,
#int-row,
#res-row,
#has-row {
  background: black;
  display: flex;
  flex-direction: row;
  position: relative;
  width: 55px;
  border: 1px yellow solid;
}

<div id="stats-container" class="yellow-black-shadow">
  <div id="free-stats">FS</div>
  <div id="stats-column-one">
    <div id="stats-flex-one">
      <div id="str-row">
        <div class="stat-icon"></div>
        <div id="str">SR</div>
      </div>
      <div id="dex-row">
        <div class="stat-icon"></div>
        <div id="dex">DR</div>
      </div>
      <div id="int-row">
        <div class="stat-icon"></div>
        <div id="int">IR</div>
      </div>
    </div>
    <div id="stats-flex-two">
      <div id="end-row">
        <div class="stat-icon"></div>
        <div id="str">ER</div>
      </div>
      <div id="eva-row">
        <div class="stat-icon"></div>
        <div id="eva">VR</div>
      </div>
      <div id="res-row">
        <div class="stat-icon"></div>
        <div id="res">RR</div>
      </div>
    </div>
  </div>
  <div id="stats-column-two">
    <div id="has-row">
      <div class="stats-icon"></div>
      <div id="has">HR</div>
    </div>
  </div>
</div>

基本上一切正确，直到到达HR块，它应该在右侧。我想避免使用float: right;

我很确定我以错误的顺序执行此操作，但是我不确定我弄错了哪个顺序。我已经玩了一些，但是尝试做的每件不同的事情我似乎都想打破，这是我得到的最接近的东西。

Answer 1

我明白了，我忘记了应该执行的顺序，但这是解决方法

HTML：

<div id="stats-container" class="yellow-black-shadow">
  <div id="free-stats">FS</div>
  <div id="stats-column-container">
    <div id="stats-column-one">
      <div id="stats-flex-one">
        <div id="str-row">
          <div class="stat-icon"></div>
          <div id="str">SR</div>
        </div>
        <div id="dex-row">
          <div class="stat-icon"></div>
          <div id="dex">DR</div>
        </div>
        <div id="int-row">
          <div class="stat-icon"></div>
          <div id="int">IR</div>
        </div>
      </div>
      <div id="stats-flex-two">
        <div id="end-row">
          <div class="stat-icon"></div>
          <div id="str">ER</div>
        </div>
        <div id="eva-row">
          <div class="stat-icon"></div>
          <div id="eva">VR</div>
        </div>
        <div id="res-row">
          <div class="stat-icon"></div>
          <div id="res">RR</div>
        </div>
      </div>
    </div>
    <div id="stats-column-two">
      <div id="has-row">
        <div class="stats-icon"></div>
        <div id="has">HR</div>
      </div>
    </div>
  </div>
</div>

我只是将其包装在另一个包含div的容器中，并添加：

#stats-column-container {
  display: flex;
  flex-direction: row;
}

我也完全删除了

#stats-column-one,
#stats-column-two {
  display: flex;
  flex-direction: column;
}

有关其外观的参考 http://prntscr.com/ndijk0（通过照光拍摄）

希望这可以帮助某人将来更好地了解订单，因为这有时会使我感到困惑。

列和行弯曲

1 个答案: