css - React 和 flexbox 的问题

Question

尝试使用 React 和 flexbox 创建一个计算器，但我的 flexbox 似乎无法正常工作。

我尝试使用 chrome 开发工具，结果是一样的

import React, { Component } from "react";
import './App.css';
import Button from "./components/Button";

class App extends Component {
render() {
return (
<div className="App">
  <div className="calc-wrapper">
    <div className="rows">
      <Button>7</Button>`
      <Button>8</Button>
      <Button>9</Button>
      <Button>/</Button>
    </div>
    <div className="rows">
      <Button>7</Button>
      <Button>8</Button>
      <Button>9</Button>
      <Button>/</Button>
    </div>
  </div>
</div>
);
}
}

export default App;

this是css文件，在此处输入代码

.App{
display: flex;` 
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}

.calc-wrapper{
 width: 400px;
 height: 600px;
 }

.rows{
 display: flex;
 width: 100%;
 }

数字不是像计算器按钮那样以方框为中心，而是单独堆叠在一起

Answer 1

需要设置calc-wrapper的display属性为flex，flex-direction属性为column。因为 row 存在于 calc-wrapper 中，而不是 App。

检查工作考试: https://jsfiddle.net/mn0r3gxu/3/