Flex-概述

什么是Flex?

Flex是一种CSS布局模式，与传统的基于盒子模型的布局方式相比，它更为灵活，可以实现更多的布局效果。

为什么要使用Flex?

传统盒子模型的布局方式存在很多缺陷，例如无法实现等高布局、垂直居中、自适应布局等等。而Flex布局则可以轻松解决这些问题，开发效率更高。

如何使用Flex?

使用Flex非常简单，只需要给父元素设置display:flex属性即可。同时，还可以为子元素设置flex属性，以调整子元素的布局方式。

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

.child {
  flex: 1;
}

上述代码定义了一个父元素为Flex布局，子元素采用等比分配的布局方式。这样可以实现水平居中、垂直居中、等高布局的效果。

Flex的主要属性

除了display:flex属性外，Flex还提供了很多属性，用于更精细化地调整布局效果。

1. flex-direction

该属性定义了Flex容器的主轴方向，默认为水平方向。可以通过该属性来调整Flex布局的方向，进而实现不同的布局效果。

.parent {
  flex-direction: row; /* 水平方向布局 */
}

.parent {
  flex-direction: column; /* 垂直方向布局 */
}

2. justify-content

该属性定义了Flex容器中子元素沿主轴方向的对齐方式。可以通过该属性来实现水平居中、左对齐、右对齐等等布局效果。

.parent {
  justify-content: center; /* 水平居中 */
}

.parent {
  justify-content: flex-start; /* 左对齐 */
}

.parent {
  justify-content: flex-end; /* 右对齐 */
}

3. align-items

该属性定义了Flex容器中子元素沿交叉轴方向的对齐方式。可以通过该属性来实现垂直居中、顶对齐、底对齐等等布局效果。

.parent {
  align-items: center; /* 垂直居中 */
}

.parent {
  align-items: flex-start; /* 顶对齐 */
}

.parent {
  align-items: flex-end; /* 底对齐 */
}

4. flex-wrap

该属性定义了Flex容器中子元素是否换行。默认情况下，Flex容器不会换行，子元素会尽可能地占据一整行。

.parent {
  flex-wrap: wrap; /* 自动换行 */
}

.parent {
  flex-wrap: nowrap; /* 不换行 */
}

5. align-content

该属性定义了Flex容器中多行子元素的对齐方式。只有在Flex容器中存在多行子元素时，才有意义。

.parent {
  align-content: center; /* 多行子元素垂直居中 */
}

.parent {
  align-content: flex-start; /* 多行子元素顶对齐 */
}

.parent {
  align-content: flex-end; /* 多行子元素底对齐 */
}

6. flex

该属性定义了Flex容器中子元素的伸缩性质。即子元素在主轴方向上的占比，越大则占比越大。

.child {
  flex: 1; /* 等比分配，占据同样的空间 */
}

.child {
  flex: 2; /* 占据父元素的两倍空间 */
}

总结

Flex布局是一种更为灵活、高效的布局方式，可以轻松实现等高布局、垂直居中、自适应布局等功能。掌握Flex布局需要熟练掌握以上属性，通过灵活运用这些属性就可以实现各种布局效果。