React中如何让map遍历渲染的按键元素按行排列而非纵向单列

布局失效的核心原因是Flex布局容器的位置写错了：你在map遍历的时候，给每个按键单独套了一个带keyboard-container类的div，相当于页面上渲染了几十个独立的Flex容器，每个容器里只有1个按键。这类div默认是块级元素，每个都会单独占满一整行，最终所有按键自然排成纵向单列。
不管你给这个类加flex-direction:row还是换Grid布局，只要容器只包了单个元素，都不可能实现多元素横向排列的效果。

1. 调整JSX结构 #

把keyboard-container类从循环内的单个按键外层，移到包裹所有按键的父级div上，让所有按键元素成为同一个Flex容器的直接子元素。修正后的组件代码：

const Keypad = () => {
    const letters = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O',
        // 其余字母按键按需补充即可
    ]

    return(
        <div className="keyboard-container">
            {letters.map((letter, index) => {
                return(
                    <div className="key" key={index}>
                        {letter}
                    </div>
                )
            })}
        </div>
    )
}
 
export default Keypad;

2. 配套CSS优化 #

给Flex容器加自动换行、按键间距属性，避免按键过多时溢出屏幕，同时优化按键的基础显示效果：

.keyboard-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 按键总宽度超过容器时自动换行，适配不同屏幕尺寸 */
    justify-content: center;
    gap: 8px; /* 控制按键之间的间距，无需单独给按键加margin */
    padding: 12px;
}

.keyboard-container .key {
    width: 60px;
    height: 60px;
    background-color: #69696d;
    border-radius: 6px;
    color: #ffffff;
    /* 让按键内的字母居中显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

如果你后续要做标准QWERTY键盘的分行效果（比如第一行10个键、第二行9个键、第三行7个键），只需要把字母数组按行拆分成二维数组，外层循环渲染行容器、内层循环渲染每行的按键即可，给行容器同样设置Flex横向布局就能实现标准键盘的排版。

内容的提问来源于stack exchange，提问作者Josh Simon