CSS伸缩盒模型(弹性盒子)

伸缩盒模型（Flexbox，Flexible Box Layout）是 CSS 中一种一维布局模型，用于更高效地处理元素的对齐、分布和响应式布局。其核心思想是让容器内的子元素（称为“项目”）能够灵活地自动调整大小和位置以适应不同屏幕尺寸和内容变化。

1.​核心特性

1.1​容器与项目

​        容器：使用 display: flex 或 display: inline-flex 定义的父元素。 ​

项目：容器内的直接子元素，默认沿容器的主轴排列。 ​

1.2主轴与交叉轴

​        主轴​（默认水平方向）：项目排列的方向。

​交叉轴​（垂直于主轴）：项目对齐的方向。 ​

1.3关键属性

​        flex-direction：定义主轴方向（如 row, column）。 ​

justify-content：控制项目在主轴上的对齐方式（如 flex-start, center, space-between）。

​        align-items：控制项目在交叉轴上的对齐方式（如 stretch, center）。

​flex-wrap：允许项目换行（如 nowrap, wrap）。

​align-self：单独调整某个项目的对齐方式。

1.4​弹性伸缩

项目可通过 flex: grow/shrink 或 flex-basis 控制大小比例，默认均分可用空间。 例如：flex: 1 表示项目可等比例扩展，flex: 2 0 auto 表示优先放大两倍。

​2.优势

简化复杂布局：无需浮动或定位即可实现水平/垂直居中、多栏等效果。

​响应式设计：自动适应屏幕尺寸变化，适合移动端开发。 ​

代码简洁：减少冗余样式，提高维护性。 ​

3.常见场景：

3.1导航栏（横向菜单）

3.2响应式图片轮播

3.3多栏布局（如博客侧边栏）

3.4表单元素对齐

4.示例代码

.container {
  display: flex;
  justify-content: space-between; /* 主轴两端对齐 */
  align-items: center;           /* 交叉轴居中对齐 */
}
.item {
  flex: 1; /* 等比例占据剩余空间 */
  min-width: 200px;
}