如何跨div拉伸按钮？

Question

这是我的 App.js 文件：

render() {
    return (
        <div className="App">
            <div className='calculator'>
                <div className='display'>
                    <span>0</span>
                </div>
                <div className='operators'>
                    <Keyboard />
                </div>
            </div>
        </div>
    );
}

我的 index.css 文件：

:root{
--light: #cdd9e7;
--dark: #000000;
--primary: #83fffc;
--secondary: #ff5740;
--border: #9ca8b5;
--light2: #ff8b6c;
}

* {
    margin: 0;
    padding: 1;
    box-sizing: border-box;
    font-family: 'Arial', 'sans-serif';
}

.App {
    display: flex;
    min-height: 300;
    align-items: center;
    justify-content: center;
}

.calculator {
    width: 100%;
    max-width: 450px;
    background-color: var(--light);
    border-radius: 16px;
    overflow: hidden;
    min-height: 450px;
    box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.2);
}

.display {
    padding: 16px;
    text-align: right;
    background-color: var(--primary);
    font-size: 24px;
    border-color: #9ca8b5;
    border-style: solid;
    border-width: 16px;
    font-family: 'Arial', 'sans-serif';
}

button {
    appearance: none;
    border: none;
    box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.2);
    font-size: medium;
    border-radius: 2px;
    align-items: center;
    cursor: pointer;
    background-color: var(--secondary);
    font-size: 24px;
    padding: 16px;
}

button :hover {
    opacity: 1.0;
}

.operators {
    display: flex;
    align-items: center;
    justify-content: center;
}

.operators button{
    flex: auto;
    background-color: var(--secondary);
    font-weight: 24px;
    border-radius: 24px;
    margin: 6px;
    font-size: 24px;
    font-family: 'Arial', 'sans-serif';
}

还有我的 Keyboard.jsx 文件

    render() {
    return (
        <div>
            <button name="Clear" onClick={e => this.props.onClick(e.target.name)}>Clear</button>
            <button name="+/-" onClick={e => this.props.onClick(e.target.name)}>+/-</button>
            <button name="%" onClick={e => this.props.onClick(e.target.name)}>%</button>
            <button name="/" onClick={e => this.props.onClick(e.target.name)}>/</button><br />


            <button name="7" onClick={e => this.props.onClick(e.target.name)}>7</button>
            <button name="8" onClick={e => this.props.onClick(e.target.name)}>8</button>
            <button name="9" onClick={e => this.props.onClick(e.target.name)}>9</button>
            <button name="x" onClick={e => this.props.onClick(e.target.name)}>x</button><br />


            <button name="4" onClick={e => this.props.onClick(e.target.name)}>4</button>
            <button name="5" onClick={e => this.props.onClick(e.target.name)}>5</button>
            <button name="6" onClick={e => this.props.onClick(e.target.name)}>6</button>
            <button name="-" onClick={e => this.props.onClick(e.target.name)}>-</button><br />

            <button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>
            <button name="2" onClick={e => this.props.onClick(e.target.name)}>2</button>
            <button name="3" onClick={e => this.props.onClick(e.target.name)}>3</button>
            <button name="+" onClick={e => this.props.onClick(e.target.name)}>4</button><br />


            <button name="0" onClick={e => this.props.onClick(e.target.name)}>0</button>
            <button name="." onClick={e => this.props.onClick(e.target.name)}>.</button>
            <button name="=" onClick={e => this.props.onClick(e.target.name)}>=</button>
        </div>
    );
}

我正在开发一个计算器应用程序。这是我尝试自己开发的第一个 React 应用程序。我希望按钮的组织方式与 MacBook 上的计算器应用程序相同。现在，他们都被挤向了中心。我尝试过使用 display: flex，在我的键盘组件中使用类名“grid-container”，并在按钮样式中添加一个 width: 100% 属性。任何有关如何对齐这些按钮并以我想要的方式拉伸它们的建议将不胜感激。到目前为止我工作的链接是正确的here

Answer 1

对于您的用例，我会查看CSS Grid，因为您担心维护 2d 布局。