html - Flexbox 计算器没有正确对齐

Question

<分区>

Answer 1

由于 flex children 只继承了 parent 的一层，所以你还需要在 .row 上设置 flex display。

.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