flex布局怎么用_flex布局常见属性详解

```html

什么是Flex布局？

Flex布局（Flexible Box Layout）是CSS3引入的一种一维布局模型，专门用于在容器内高效排列子元素。它通过主轴和交叉轴的概念，让元素在**空间分配、对齐、排序**上更加灵活。

Flex布局怎么用？

1. 启用Flex容器

只需给父元素添加一行代码：

display: flex;

此时，所有直接子元素自动成为**Flex项目**，具备弹性特性。

2. 主轴方向如何控制？

通过flex-direction属性定义主轴方向：

• row：水平从左到右（默认）
• row-reverse：水平从右到左
• column：垂直从上到下
• column-reverse：垂直从下到上

.container { flex-direction: column; }

3. 如何换行？

当子元素总宽度超过容器时，用flex-wrap控制换行：

• nowrap：不换行（默认）
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

.container { flex-wrap: wrap; }

Flex布局常见属性详解

容器属性（作用于父元素）

---

justify-content：主轴对齐方式

• flex-start：左对齐
• center：居中
• space-between：两端对齐，项目间隔相等
• space-around：每个项目两侧间隔相等

---

align-items：交叉轴对齐方式

• stretch：拉伸填满（默认）
• flex-start：顶部对齐
• center：垂直居中
• baseline：基线对齐

---

align-content：多行交叉轴对齐（需配合flex-wrap: wrap）

• space-between：行与行之间均匀分布
• space-around：每行上下间隔相等

项目属性（作用于子元素）

---

flex-grow：如何放大比例

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

---

flex-shrink：如何缩小比例

.item { flex-shrink: 0; } /* 禁止缩小 */

---

flex-basis：项目初始大小

.item { flex-basis: 200px; } /* 优先占200px宽度 */

---

align-self：单个项目交叉轴对齐（覆盖容器的align-items）

.item { align-self: flex-end; }

实战问答：常见场景如何解？

Q1：如何让三个按钮水平居中且间距相等？

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

Q2：如何实现左侧固定宽度，右侧自适应？

.left { flex: 0 0 200px; } /* 固定200px */
.right { flex: 1; } /* 占剩余空间 */

Q3：如何垂直居中一个未知高度的弹窗？

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

进阶技巧：性能与兼容性

性能优化：避免嵌套多层Flex容器，减少重排。

兼容性：旧版浏览器需加前缀：

display: -webkit-box;
display: -webkit-flex;
display: flex;

常见误区提醒

• 误区1：把flex: 1等同于width: 100%——实际flex: 1是flex-grow: 1的简写，会动态分配空间。
• 误区2：忽略min-width导致内容溢出——给Flex项目加min-width: 0可解决。

```