React组件中Flexbox布局实践：解决映射列表项垂直堆叠问题

// Keypad.js - 初始错误实现
import React from 'react';

const Keypad = () => {
    const letters = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M'
    ];

    return (
        <div> {/* 这是所有 .keyboard-container 的父级 */}
            {letters.map((letter, index) => {
                return (
                    // 错误：将 .keyboard-container 应用于每个单独的键包装器
                    <div className="keyboard-container" key={index}>
                        <div className="key">{letter}</div>
                    </div>
                );
            })}
        </div>
    );
};

export default Keypad;

/* style.css - 初始错误样式 */
.keyboard-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.keyboard-container .key {
    width: 60px;
    height: 60px;
    background-color: #69696d;
}

// Keypad.js - 正确实现
import React from 'react';

const Keypad = () => {
    const letters = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M'
    ];

    return (
        // 正确：将 .keyboard-container 应用于所有键的共同父容器
        <div className="keyboard-container">
            {letters.map((letter, index) => {
                return (
                    // 每个键的包装器，不再是 Flex 容器
                    <div key={index} className="key-wrapper"> {/* 可以添加一个类方便样式控制 */}
                        <div className="key">{letter}</div>
                    </div>
                );
            })}
        </div>
    );
};

export default Keypad;

/* style.css - 优化后的样式 */
.keyboard-container {
    display: flex; /* 将父容器设置为弹性容器 */
    flex-direction: row; /* 弹性项目将横向排列 */
    flex-wrap: wrap; /* 允许项目在空间不足时换行，形成多行 */
    justify-content: center; /* 将整行（或多行）按键在主轴上居中 */
    gap: 8px; /* 使用 gap 属性在项目之间创建间距，现代且简洁 */
    padding: 10px; /* 容器内边距 */
    background-color: #333; /* 示例背景色 */
    border-radius: 10px;
    max-width: 800px; /* 限制键盘最大宽度 */
    margin: 20px auto; /* 居中显示整个键盘 */
}

/* 针对单个按键的样式 */
.key-wrapper {
    /* 如果需要，可以在这里为每个键的外部包装器添加特定样式 */
    /* 例如：margin 也可以在这里设置，但 gap 更推荐 */
}

.key {
    width: 60px;
    height: 60px;
    background-color: #69696d;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    display: flex; /* 使键内容（字母）在键内部居中 */
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.key:hover {
    background-color: #888;
}

import React from 'react';
import './style.css'; // 确保引入CSS文件

const Keypad = () => {
    const letters = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M'
    ];

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

export default Keypad;

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.keyboard-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; /* 现代 Flexbox 间距属性 */
    padding: 15px;
    background-color: #282c34; /* 深色背景 */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 700px; /* 限制键盘总宽度 */
    margin: 20px auto;
}

.key-wrapper {
    /* 可以用于设置每个键的外部边距或特定布局 */
    /* 在本例中，gap 属性已经处理了间距，这个包装器主要用于结构 */
}

.key {
    width: 55px; /* 调整键的尺寸 */
    height: 55px;
    background-color: #69696d;
    color: #e0e0e0; /* 浅色字体 */
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    user-select: none; /* 防止文本被选中 */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.key:hover {
    background-color: #8a8a8f;
    transform: translateY(-2px); /* 悬停时轻微上浮效果 */
}

.key:active {
    background-color: #555;
    transform: translateY(0); /* 点击时恢复 */
}