Flex布局完整教程与案例
Flex布局（Flexbox）是一种CSS布局模式，旨在更高效地布局、分发和对齐容器中的项目，即使容器大小动态变化或未知。它对于设计复杂的页面布局和对齐页面元素特别有用。
一、Flex布局核心概念
1. 容器与项目
- 容器（Flex Container）：采用Flex布局的元素，称为Flex容器。
- 项目（Flex Item）：容器内的直接子元素，称为Flex项目。
2. 轴的概念
- 主轴（Main Axis）：Flex项目沿其排列的轴，默认是水平方向。
- 交叉轴（Cross Axis）：垂直于主轴的轴，默认是垂直方向。
二、Flex容器属性
1. display
- 值：
flex|inline-flex - 作用：定义一个Flex容器。
.container {
display: flex; /* 或 inline-flex */
}
2. flex-direction
- 值：
row|row-reverse|column|column-reverse - 作用：定义主轴的方向。
.container {
flex-direction: row; /* 默认，水平从左到右 */
/* flex-direction: row-reverse; 水平从右到左 */
/* flex-direction: column; 垂直从上到下 */
/* flex-direction: column-reverse; 垂直从下到上 */
}
3. flex-wrap
- 值：
nowrap|wrap|wrap-reverse - 作用：定义项目是否换行。
.container {
flex-wrap: nowrap; /* 默认，不换行 */
/* flex-wrap: wrap; 换行，行在上方 */
/* flex-wrap: wrap-reverse; 换行，行在下方 */
}
4. flex-flow
- 值：
<flex-direction> <flex-wrap> - 作用：
flex-direction和flex-wrap的简写。
.container {
flex-flow: row wrap; /* 水平方向，换行 */
}
5. justify-content
- 值：
flex-start|flex-end|center|space-between|space-around|space-evenly - 作用：定义项目在主轴上的对齐方式。
.container {
justify-content: flex-start; /* 默认，左对齐 */
/* justify-content: flex-end; 右对齐 */
/* justify-content: center; 居中 */
/* justify-content: space-between; 两端对齐，项目间间隔相等 */
/* justify-content: space-around; 项目两侧间隔相等 */
/* justify-content: space-evenly; 项目间及两侧间隔相等 */
}
6. align-items
- 值：
flex-start|flex-end|center|baseline|stretch - 作用：定义项目在交叉轴上的对齐方式。
.container {
align-items: stretch; /* 默认，项目占满容器 */
/* align-items: flex-start; 交叉轴起点对齐 */
/* align-items: flex-end; 交叉轴终点对齐 */
/* align-items: center; 交叉轴居中对齐 */
/* align-items: baseline; 项目行文字基线对齐 */
}
7. align-content
- 值：
flex-start|flex-end|center|space-between|space-around|stretch - 作用：定义多根轴线的对齐方式（仅当项目换行时有效）。
.container {
align-content: stretch; /* 默认，轴线占满容器 */
/* align-content: flex-start; 轴线在交叉轴起点对齐 */
/* align-content: flex-end; 轴线在交叉轴终点对齐 */
/* align-content: center; 轴线在交叉轴居中对齐 */
/* align-content: space-between; 轴线两端对齐，间隔相等 */
/* align-content: space-around; 轴线两侧间隔相等 */
}
三、Flex项目属性
1. order
- 值：整数
- 作用：定义项目的排列顺序，数值越小越靠前。
.item {
order: 1; /* 默认是0 */
}
2. flex-grow
- 值：非负数
- 作用：定义项目的放大比例。
.item {
flex-grow: 1; /* 默认是0，不放大 */
}
3. flex-shrink
- 值：非负数
- 作用：定义项目的缩小比例。
.item {
flex-shrink: 1; /* 默认是1，空间不足时缩小 */
}
4. flex-basis
- 值：
auto| 具体长度或百分比 - 作用：定义项目在分配多余空间之前的大小。
.item {
flex-basis: auto; /* 默认，项目大小由内容决定 */
/* flex-basis: 100px; 项目大小固定为100px */
/* flex-basis: 50%; 项目大小占容器的50% */
}
5. flex
- 值：
none|<flex-grow> <flex-shrink> <flex-basis> - 作用：
flex-grow、flex-shrink和flex-basis的简写。
.item {
flex: 1; /* 等同于 flex: 1 1 0%; 项目将均分剩余空间 */
}
6. align-self
- 值：
auto|flex-start|flex-end|center|baseline|stretch - 作用：允许单个项目有与其他项目不同的对齐方式，覆盖
align-items。
.item {
align-self: center; /* 项目在交叉轴居中对齐 */
}
四、Flex布局案例
案例1：水平垂直居中
```html
```
```css
.container {
display: flex;
justify-content: center; /* 水平居中 /
align-items: center; / 垂直居中 /
height: 100vh; / 容器高度占满视口 */
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}
```
案例2：导航栏布局
```html
```
```css
.nav {
display: flex;
justify-content: space-between; /* 两端对齐 /
align-items: center; / 垂直居中 */
padding: 10px;
background-color: #333;
color: white;
}
.logo {
font-size: 24px;
}
.links a {
color: white;
margin-left: 20px;
text-decoration: none;
}
```
案例3：响应式布局
```html
```
```css
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
.item {
flex: 1 1 200px; /* 项目最小宽度200px，均分剩余空间 */
margin: 10px;
background-color: lightcoral;
height: 100px;
}
```
Flex布局是一种强大且灵活的布局模式，适用于各种复杂的页面布局需求。通过掌握Flex容器的属性和Flex项目的属性，可以轻松实现水平垂直居中、导航栏布局、响应式布局等常见布局场景。在实际应用中，建议结合具体需求选择合适的属性和值，以达到的布局效果。
