解决React中Flex布局导致映射元素垂直堆叠的问题：强制项按行排列

const Keypad = () => {
    const letters = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', /* etc */
    ];

    return (
        <div> {/* 这个div不是flex容器 */}
            {letters.map((letter, index) => {
                return (
                    <div className="keyboard-container" key={index}> {/* 错误：每个键都成为一个独立的flex容器 */}
                        <div className="key">{letter}</div>
                    </div>
                );
            })}
        </div>
    );
};

export default Keypad;

.keyboard-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.keyboard-container .key {
    width: 60px;
    height: 60px;
    background-color: #69696d;
    /* 其他样式 */
}

const Keypad = () => {
    const letters = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', /* etc */
    ];

    return (
        <div className="keyboard-container"> {/* 正确：这个div现在是所有键的flex容器 */}
            {letters.map((letter, index) => {
                return (
                    <div key={index}> {/* 这个div现在是flex容器的直接子元素，即一个flex项目 */}
                        <div className="key">{letter}</div>
                    </div>
                );
            })}
        </div>
    );
};

export default Keypad;

.keyboard-container {
    display: flex; /* 声明为Flex容器 */
    flex-direction: row; /* Flex项目按行排列 */
    justify-content: center; /* Flex项目在主轴上居中对齐 */
    flex-wrap: wrap; /* 允许Flex项目在空间不足时换行 */
    gap: 10px; /* 为Flex项目之间添加间距，现代Flexbox推荐 */
    padding: 10px;
}

.keyboard-container > div { /* 针对每个键的包裹div，作为Flex项目 */
    /* 可以添加额外的样式，如边距，如果不用gap的话 */
}

.keyboard-container .key {
    width: 60px;
    height: 60px;
    background-color: #69696d;
    display: flex; /* 让字母在键内居中 */
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2em;
    border-radius: 5px;
    cursor: pointer;
    user-select: none; /* 防止文本被选中 */
}

.keyboard-container .key:hover {
    background-color: #88888d;
}