Flexbox 计算器未正确对齐

Question

我确信计算器是一个常见的项目，但我在这里使用 Flexbox 真的很困难。我为每个计算器按钮行都有一个行类，以及不同的按钮大小。但是最后一个按钮将沿着新行移动，而不是停留在该行的原始行中，即使它们有足够的宽度。* {        box-sizing: border-box;    }        body {        margin: 0;        padding: 0;    }        .wrapper {        display: flex;        flex-direction: column;        background-color: #0f0f0f;        color: #fff;        width: 400px;        align-content: stretch;        justify-content: space-between;        font-family: Helvetica, Arial, sans-serif;    }            /* ROWS */        .result-row {        width: 100%;        font-family: monospace;        background-color: #0f0f0f;        text-align: right;    }        .row {        width: 100%;    }            /* BUTTONS */        .small {        width: 24.5%;    }        .medium {        width: 49.5%;    }        .large {        width: 74.5%;    }        .button {        border: 0;        border-radius: 0;    }<div class="wrapper">        <div class="result-row">            0        </div>        <div class="row">            <button class="medium button">C</button>            <button class="small button">&#8592;</button>            <button class="small button">&divide;</button>        </div>        <div class="row">            <button class="small button">7</button>            <button class="small button">8</button>            <button class="small button">9</button>            <button class="small button">X</button>        </div>我真的不明白这里发生了什么，我认为只要容器中有足够的空间，div 中的元素就不能在带有 Flexbox 的新“行”中占用空间。

Answer 1

由于flex子项只从父项继承一级，因此还需要在.rows上设置flex显示。

.row {

  width: 100%;

  display: flex;

  flex-wrap: nowrap;

}

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  padding: 0;

}

.wrapper {

  display: flex;

  flex-direction: column;

  background-color: #0f0f0f;

  color: #fff;

  width: 400px;

  align-content: stretch;

  justify-content: space-between;

  font-family: Helvetica, Arial, sans-serif;

}

/* ROWS */

.result-row {

  width: 100%;

  font-family: monospace;

  background-color: #0f0f0f;

  text-align: right;

}

.row {

  width: 100%;

  display: flex;

  flex-wrap: nowrap;

}

/* BUTTONS */

.small {

  width: 24.5%;

}

.medium {

  width: 49.5%;

}

.large {

  width: 74.5%;

}

.button {

  border: 0;

  border-radius: 0;

}

<div class="wrapper">

  <div class="result-row">

    0

  </div>

  <div class="row">

    <button class="medium button">C</button>

    <button class="small button">&#8592;</button>

    <button class="small button">&divide;</button>

  </div>

  <div class="row">

    <button class="small button">7</button>

    <button class="small button">8</button>

    <button class="small button">9</button>

    <button class="small button">X</button>

  </div>

  <div class="row">

    <button class="small button">4</button>

    <button class="small button">5</button>

    <button class="small button">6</button>

    <button class="small button">-</button>

  </div>

  <div class="row">

    <button class="small button">1</button>

    <button class="small button">2</button>

    <button class="small button">3</button>

    <button class="small button">+</button>

  </div>

  <div class="row">

    <button class="large button">0</button>

    <button class="small button">=</button>

  </div>

</div>

jsFiddle