12个Flex常用功能代码展示

在前端开发中，Flex布局是一种强大的排版方式，它能轻松实现页面元素的灵活排列和对齐。下面为大家展示12个Flex常用功能的代码。

1. 基本的Flex容器设置

.container {
  display: flex;
}

只需这一行代码，就将容器设置为Flex布局。

2. 水平居中对齐

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

justify-content: center;使子元素在主轴上水平居中。

3. 垂直居中对齐

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

align-items: center;让子元素在交叉轴上垂直居中。

4. 主轴方向改变

.container {
  display: flex;
  flex-direction: column;
}

将主轴方向改为垂直方向。

5. 子元素均匀分布

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

子元素会在主轴上均匀分布，两端有一定间距。

6. 子元素两端对齐，中间均匀分布

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

7. 子元素换行显示

.container {
  display: flex;
  flex-wrap: wrap;
}

当容器空间不足时，子元素会自动换行。

8. 子元素按比例分配空间

.item {
  flex: 1;
}

子元素会按比例分配剩余空间。

9. 子元素顺序调整

.item {
  order: 2;
}

可改变子元素的排列顺序。

10. 子元素自身对齐方式调整

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

可单独设置某个子元素的对齐方式。

11. 自动拉伸子元素高度

.item {
  flex-grow: 1;
}

子元素会自动拉伸填充剩余空间。

12. 固定子元素宽度

.item {
  flex-basis: 200px;
}

设置子元素的初始宽度。

掌握这些Flex常用功能代码，能让前端布局更加高效和灵活，提升开发效率。