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 {&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-wrap: nowrap;}* {&nbsp; box-sizing: border-box;}body {&nbsp; margin: 0;&nbsp; padding: 0;}.wrapper {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; background-color: #0f0f0f;&nbsp; color: #fff;&nbsp; width: 400px;&nbsp; align-content: stretch;&nbsp; justify-content: space-between;&nbsp; font-family: Helvetica, Arial, sans-serif;}/* ROWS */.result-row {&nbsp; width: 100%;&nbsp; font-family: monospace;&nbsp; background-color: #0f0f0f;&nbsp; text-align: right;}.row {&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-wrap: nowrap;}/* BUTTONS */.small {&nbsp; width: 24.5%;}.medium {&nbsp; width: 49.5%;}.large {&nbsp; width: 74.5%;}.button {&nbsp; border: 0;&nbsp; border-radius: 0;}<div class="wrapper">&nbsp; <div class="result-row">&nbsp; &nbsp; 0&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <button class="medium button">C</button>&nbsp; &nbsp; <button class="small button">&#8592;</button>&nbsp; &nbsp; <button class="small button">&divide;</button>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <button class="small button">7</button>&nbsp; &nbsp; <button class="small button">8</button>&nbsp; &nbsp; <button class="small button">9</button>&nbsp; &nbsp; <button class="small button">X</button>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <button class="small button">4</button>&nbsp; &nbsp; <button class="small button">5</button>&nbsp; &nbsp; <button class="small button">6</button>&nbsp; &nbsp; <button class="small button">-</button>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <button class="small button">1</button>&nbsp; &nbsp; <button class="small button">2</button>&nbsp; &nbsp; <button class="small button">3</button>&nbsp; &nbsp; <button class="small button">+</button>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <button class="large button">0</button>&nbsp; &nbsp; <button class="small button">=</button>&nbsp; </div></div>jsFiddle