DT走过的路

1. display: flex 核心作用

给父容器设置 display: flex，会把父容器变成 弹性容器，它里面所有直接子元素（div、span） 自动变成「弹性项目」。

默认弹性布局规则：

• 主轴是水平方向（x 轴，从左到右）
• 所有子元素默认排在同一行，不会自动换行（不设置 flex-wrap 的前提下）

.table-header-container{
    position: fixed;
    left: 270px;
    top: 20px;
    width: calc(100% - 470px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.big-style{
    left: 140px !important;
    width: calc(100% - 300px) !important;
}
    .mr-10{margin-right: 10px;}
    .table-header-right{
        display: flex;
        align-items: center;
    }
}

<div className={classNames('table-header-container',{'big-style':collapse})}>
            <div className="table-header-left">
                <Button size="small" className="mr-10" shape="round" icon={IconMap.create}>创建</Button>
                <Button danger size="small" shape="round" icon={IconMap.delMul}>批量删除</Button>
            </div>
            <div className="table-header-right"> 
                <Pagination 
                simple 
                defaultCurrent={page} 
                current={page} 
                onChange={changePage} 
                pageSize={size} 
                total={total} />
                <span>共计{total} 条记录</span>
            </div>
        </div>

最外层 display:flex，控制两边对齐

加了 display:flex 后：块级 div 不再独占一行，和 span 水平并排。

原来的情况：

• div 是块级元素，独占一整行；
• span 是行内元素，跟文字同行； 不加 flex 时：

123
共计xx条记录

加了 display:flex 后：块级 div 不再独占一行，和 span 水平并排。

2. align-items: center 作用

align-items 控制交叉轴（垂直方向 y 轴） 的对齐方式：

• 默认值：stretch（子元素高度拉伸填满父容器）
• center：所有子元素在垂直方向居中对齐

比如 div 文字字号大、span 字号小，不加 center 会底部对齐，加上后上下居中，视觉整齐。