Web前端开发:Flex布局（弹性布局）

一、什么是 Flex 布局？

        Flex（弹性盒子布局）是一种一维布局模型，用于控制容器内子元素的排列、对齐和空间分配。特别适合处理行或列方向的布局，比如导航栏、卡片列表、居中元素等。

 

二、基本概念 

1. Flex 容器：通过 display: flex; 或 display: inline-flex; 定义的父元素。

2. Flex 项目：容器内的直接子元素，自动成为 Flex 项目。

3. 主轴（Main Axis）：默认是水平方向（从左到右），由 flex-direction 控制。

4. 交叉轴（Cross Axis）：默认是垂直方向（从上到下），与主轴垂直。

 

 三、容器的核心属性

1. 主轴方向：flex-direction

• 控制项目的排列方向：

.container {flex-direction: row;       /* 默认：水平排列（左→右） */flex-direction: row-reverse; /* 水平反向（右→左） */flex-direction: column;    /* 垂直排列（上→下） */flex-direction: column-reverse; /* 垂直反向（下→上） */
}

2. 换行：flex-wrap

• 控制是否允许换行：

.container {flex-wrap: nowrap;  /* 默认：不换行（可能溢出） */flex-wrap: wrap;    /* 换行（上→下） */flex-wrap: wrap-reverse; /* 反向换行（下→上） */
}

3. 主轴对齐：justify-content

• 控制项目在主轴上的对齐方式：

.container {justify-content: flex-start;  /* 默认：左对齐 */justify-content: flex-end;    /* 右对齐 */justify-content: center;      /* 居中 */justify-content: space-between; /* 两端对齐，项目间距相等 */justify-content: space-around;  /* 项目两侧间距相等 */justify-content: space-evenly;  /* 所有间距完全相等 */
}

4. 交叉轴对齐：align-items

• 控制项目在交叉轴上的对齐方式：

.container {align-items: stretch;    /* 默认：拉伸填满容器高度 */align-items: flex-start; /* 顶部对齐 */align-items: flex-end;   /* 底部对齐 */align-items: center;     /* 垂直居中 */align-items: baseline;   /* 基线对齐（按第一行文字对齐） */
}

5. 多行对齐：align-content

• 当有多行时，控制行在交叉轴上的对齐（类似 justify-content）：

.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 

四、项目的核心属性

1. 顺序：order

• 控制项目的排列顺序，数值越小越靠前（默认 0）：

.item {order: 2; /* 默认是0，设置为2会排在后面 */
}

2. 放大比例：flex-grow

• 定义项目在容器有剩余空间时的放大比例（默认 0，不放大）：

.item {flex-grow: 1; /* 所有项目平分剩余空间 */
}

3. 缩小比例：flex-shrink

• 定义项目在空间不足时的缩小比例（默认 1，允许缩小）：

.item {flex-shrink: 0; /* 禁止缩小（保持原始大小） */
}

4. 基础大小：flex-basis

• 定义项目在分配空间前的初始大小（类似 width）：

.item {flex-basis: 200px; /* 初始宽度为200px */
}

5. 简写属性：flex

• 合并 flex-grow, flex-shrink, flex-basis：

.item {flex: 1 0 auto; /* 等同于 flex-grow:1; flex-shrink:0; flex-basis:auto; */
}
/* 常用简写 */
flex: 1;          /* flex:1 1 0 */
flex: auto;       /* flex:1 1 auto */
flex: none;       /* flex:0 0 auto */

6. 单独对齐：align-self

• 覆盖容器的 align-items，单独设置某个项目的对齐方式：

.item {align-self: center; /* 垂直居中 */
}

 

五、经典案例

1. 水平垂直居中

.container {display: flex;justify-content: center; /* 主轴居中 */align-items: center;     /* 交叉轴居中 */
}

2. 导航栏

.nav {display: flex;justify-content: space-between; /* 左右两端对齐 */
}

 3. 等高布局

.container {display: flex;align-items: stretch; /* 默认值，项目高度自动拉伸为容器高度 */
}

 

六、注意事项

1. 浏览器兼容性：Flex 在现代浏览器中支持良好，但在旧版浏览器（如 IE10+）可能需要前缀。

2. 弹性 vs 固定大小：合理使用 flex-grow 和 flex-shrink 控制项目的伸缩行为。

3. 一维布局：Flex 适合单行/列的布局，复杂二维布局建议使用 Grid。