CSS Flex布局从入门到实战，常用布局代码片段汇总

Flex弹性布局是现代前端最常用布局方案，可以轻松实现水平居中、自适应多列，告别传统浮动布局。下面整理开发中最高频的代码片段，直接复制使用。

1、容器基础开启flex

.box{
    display: flex;
}

2、元素水平垂直居中（最常用）

.box{
    display:flex;
    justify-content:center;
    align-items:center;
}

3、多列卡片自动换行布局

.box{
    display:flex;
    flex-wrap: wrap;
    gap:20px;
}
.item{
    width: calc(33.33% - 14px);
}

4、左右分布，一侧固定，一侧自适应填充

.box{
    display:flex;
}
.left{
    width:200px;
}
.right{
    flex:1;
}

5、垂直方向排列

.box{
    display:flex;
    flex-direction: column;
}

小总结

justify-content 控制主轴对齐；align-items 控制交叉轴对齐；flex-wrap:wrap 允许子元素换行。绝大多数页面布局，依靠这几个属性就可以完成。

移动端适配时，配合媒体查询修改flex方向，轻松实现响应式排版。