CSS学习笔记(一)：Flex布局全攻略
Flex 布局基础概念
Flex布局（弹性盒子布局）是一种CSS3的布局模式，旨在提供更高效的容器内项目排列、对齐和分配空间的方式，尤其适用于动态或未知尺寸的布局场景。核心思想是让容器能够根据可用空间自动调整子元素的大小和位置。
容器属性
display: flex
将元素设置为 Flex 容器，其子元素自动成为 Flex 项目。
.container {display: flex;
}
flex-direction
定义主轴方向，决定项目的排列方式。
可选值：
row（默认值）：从左到右排列row-reverse：从右到左排列column：从上到下排列column-reverse：从下到上排列
.container {flex-direction: row;
}
flex-wrap
控制项目是否换行。
可选值：
nowrap（默认值）：不换行wrap：换行，第一行在上wrap-reverse：换行，第一行在下
.container {flex-wrap: wrap;
}
justify-content
定义项目在主轴上的对齐方式。
可选值：
flex-start（默认值）：左对齐flex-end：右对齐center：居中对齐space-between：两端对齐，项目间隔相等space-around：项目两侧间隔相等
.container {justify-content: center;
}
align-items
定义项目在交叉轴上的对齐方式。
可选值：
stretch（默认值）：拉伸以填满容器flex-start：顶部对齐flex-end：底部对齐center：居中对齐baseline：基线对齐
.container {align-items: center;
}
align-content
定义多根轴线的对齐方式（适用于多行 Flex 容器）。
可选值：
stretch（默认值）：轴线占满剩余空间flex-start：顶部对齐flex-end：底部对齐center：居中对齐space-between：两端对齐space-around：轴线两侧间隔相等
.container {align-content: space-between;
}
项目属性
order
控制项目排列顺序，数值越小越靠前，默认为0。
.item {order: 2;
}
flex-grow
定义项目的放大比例，默认为0（不放大）。若所有项目为1，则等分剩余空间；若某项目为2，则占据空间为其他项目的两倍。
.item {flex-grow: 1;
}
flex-shrink
定义项目的缩小比例，默认为1（空间不足时等比例缩小）。设为0时禁止缩小。
.item {flex-shrink: 0;
}
flex-basis
定义项目在分配多余空间前的初始尺寸，默认为auto（项目原大小）。可设为固定值（如200px）或百分比。
.item {flex-basis: 100px;
}
flex
简写属性，格式为flex-grow flex-shrink flex-basis，默认值0 1 auto。常用简写：
flex: 1→1 1 0%（等分空间）。flex: auto→1 1 auto（按内容大小分配）。
.item {flex: 1 0 auto;
}
align-self
允许单个项目与其他项目采用不同的对齐方式。
.item {align-self: flex-end;
}
常见应用场景
水平居中
通过justify-content和align-items实现水平和垂直居中。
.container {display: flex;justify-content: center;align-items: center;
}
等分布局
利用flex-grow让项目平分剩余空间。
.item {flex-grow: 1;
}
圣杯布局
结合flex-direction和order实现复杂布局。
.container {display: flex;flex-direction: column;
}
.header {order: -1;
}
.content {flex: 1;
}
Flex 布局提供了强大的灵活性，适用于响应式设计和复杂布局需求。通过合理组合容器和项目的属性，可以实现多种布局效果。
常见问题与解决方案
等高分栏 用align-items: stretch（默认值）让项目高度与容器一致。
动态间距 justify-content: space-between实现两端对齐，gap属性设置项目间距。
移动端适配 结合媒体查询调整flex-direction为column：
@media (max-width: 768px) {.container { flex-direction: column; }
}
注意事项
浏览器兼容性
Flex布局支持现代浏览器，但旧版IE需前缀（如-ms-flexbox）。使用工具如Autoprefixer自动处理。性能影响
嵌套过深的Flex容器可能导致渲染性能下降，尤其在移动端。最小尺寸限制
Flex项目默认不缩小到小于内容最小宽度（如文本）。可通过min-width: 0强制缩小。滚动区域问题
在Flex容器内使用overflow: auto时，需显式设置高度或宽度，否则可能无法正确滚动。
最佳实践总结
- 优先使用简写属性
flex而非单独设置flex-grow/shrink/basis。 - 复杂布局可结合Grid布局（CSS Grid）实现，Flex更适合一维布局。
- 使用
gap属性（需现代浏览器）替代margin控制项目间距，避免额外计算。 - 测试时检查不同内容长度下的布局表现，避免内容溢出破坏设计。