flex 布局完整功能介绍和示例演示

Flex布局（弹性布局）是一种高效的CSS布局模式，用于创建响应式和灵活的页面布局。以下是其完整功能介绍和示例演示：

基本概念

弹性容器（Flex Container） ：设置display: flex或display: inline-flex的元素成为弹性容器。
弹性项目（Flex Item）：弹性容器的直接子元素。

容器属性

flex-direction

功能：定义主轴方向，决定弹性项目的排列方向。

示例：

css 复制代码

.container {
  flex-direction: row; /* 默认值，水平从左到右 */
  /* 其他值：row-reverse（从右到左）、column（垂直从上到下）、column-reverse（从下到上） */
}

flex-wrap

功能：控制弹性项目是否换行。

示例：

css 复制代码

.container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  /* 其他值：wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方） */
}

justify-content

功能：定义弹性项目在主轴上的对齐方式。

示例：

css 复制代码

.container {
  justify-content: flex-start; /* 默认值，靠主轴起点对齐 */
  /* 其他值：flex-end（靠主轴终点对齐）、center（居中对齐）、space-between（两端对齐，项目间等距）、space-around（每个项目周围等距）、space-evenly（项目间及首尾等距） */
}

align-items

功能：定义弹性项目在交叉轴上的对齐方式。

示例：

css 复制代码

.container {
  align-items: stretch; /* 默认值，拉伸填满交叉轴 */
  /* 其他值：flex-start（靠交叉轴起点对齐）、flex-end（靠交叉轴终点对齐）、center（居中对齐）、baseline（基线对齐） */
}

align-content

功能：定义多行弹性项目在交叉轴上的对齐方式（仅在有多行时有效）。

示例：

css 复制代码

.container {
  align-content: stretch; /* 默认值，拉伸填满交叉轴 */
  /* 其他值：flex-start（靠交叉轴起点对齐）、flex-end（靠交叉轴终点对齐）、center（居中对齐）、space-between（行间等距）、space-around（每行周围等距） */
}

项目属性

order
- 功能：控制弹性项目的排列顺序，值越小越靠前。
- 示例：
  css 复制代码
```
.item {
  order: 1; /* 默认值 */
}
```
flex-grow
- 功能：定义弹性项目的放大比例。
- 示例：
  css 复制代码
```
.item {
  flex-grow: 1; /* 默认值0，不放大 */
}
```
flex-shrink
- 功能：定义弹性项目的缩小比例。
- 示例：
  css 复制代码
```
.item {
  flex-shrink: 1; /* 默认值，可缩小 */
}
```

flex-basis

功能：设置弹性项目的初始尺寸。

示例：

css 复制代码

.item {
  flex-basis: auto; /* 默认值，根据内容决定尺寸 */
  /* 其他值：具体像素值、百分比等 */
}

flex
- 功能：flex-grow、flex-shrink、flex-basis的缩写。
- 示例：
  css 复制代码
```
.item {
  flex: 1 1 auto; /* 默认值 */
  /* 示例：flex: 2 0 200px; */
}
```
align-self
- 功能：单独设置某个弹性项目在交叉轴上的对齐方式，覆盖align-items。
- 示例：
  css 复制代码
```
.item {
  align-self: auto; /* 默认值，继承align-items */
  /* 其他值与align-items相同 */
}
```

示例演示

水平居中

css 复制代码

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

垂直居中

css 复制代码

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

等分布局

css 复制代码

.container {
  display: flex;
  justify-content: space-between;
}

多列自适应

css 复制代码

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 0 200px;
}

总结

Flex布局通过简单的属性设置，实现了灵活的页面布局，适用于各种响应式设计需求。掌握Flex布局，可以大大提高前端开发的效率。