.cards-container {
    display: flex;              /* 启用Flexbox布局 */
    flex-wrap: wrap;            /* 允许卡片换行，空间不足时自动换到下一行 */
    gap: 1rem;                  /* 卡片之间的间距 */
}

.card {
    flex: 1 1 300px;            /* flex简写：flex-grow: 1, flex-shrink: 1, flex-basis: 300px */
                                /* 意思是：卡片可以增长和收缩，基础宽度300px */
    display: flex;              /* 卡片内部也使用Flexbox */
    flex-direction: column;     /* 卡片内部垂直排列：头部、主体、底部 */
}

.layout-container {
    display: flex;              /* 启用Flexbox水平布局 */
    min-height: 200px;          /* 设置最小高度，确保布局有足够的视觉空间 */
}

.sidebar {
    flex: 0 0 200px;            /* flex简写：不增长、不收缩、固定宽度200px */
                                /* 这确保侧边栏始终保持200px宽度 */
}

.main-content-demo {
    flex: 1;                    /* flex: 1 意味着占据所有剩余空间 */
                                /* 主内容区会自动调整宽度适应屏幕 */
}

.center-container {
    display: flex;              /* 启用Flexbox布局 */
    justify-content: center;    /* 主轴方向居中（水平居中） */
    align-items: center;        /* 交叉轴方向居中（垂直居中） */
    height: 200px;              /* 设置容器高度，为垂直居中提供空间 */
}
/* 这三行代码就解决了CSS居中的经典难题！ */

.center-box {
    text-align: center;         /* 文本内容居中对齐 */
}