flex布局，rem基础知识点总结

移动端布局是现代网页设计中的一个重要组成部分，它要求设计师和开发者能够在不同的设备和屏幕尺寸上提供一致的用户体验。在实现这一目标的过程中，Flex布局（Flexible Box Layout）和rem单位是两个关键的技术。

Flex布局

Flex布局，也称为弹性盒子布局，是一种现代的CSS布局模式，它提供了一种更加有效的方式来布局、对齐和分配空间，尤其是在不同屏幕尺寸和设备上。Flex布局允许容器内的子元素自动调整大小和位置，以适应容器的空间。

基本概念

**容器（Container）**：设置了`display: flex;`的元素成为Flex容器。
**项目（Item）**：容器内的直接子元素成为Flex项目。

基本属性

1.`flex-direction`：定义项目的主轴排列方向，可以是`row`（默认，水平排列）、`column`（垂直排列）、`row-reverse`或`column-reverse`。
2.`justify-content`：定义项目在主轴上的对齐方式，如`flex-start`、`flex-end`、`center`、`space-between`和`space-around`等。
3`align-items`：定义项目在交叉轴上的对齐方式，同样有`flex-start`、`flex-end`、`center`等选项。
4.`flex-wrap`：定义当一行空间不足时是否换行，`nowrap`（默认，不换行）、`wrap`（换行）和`wrap-reverse`（反向换行）。

项目属性

1. `order`：定义项目的排序顺序，数值越小，排序越靠前。
2.`flex-grow`：定义项目的放大比例，当有剩余空间时，项目将根据自身的`flex-grow`值进行放大。
3.`flex-shrink`：定义项目的缩小比例，当空间不足时，项目将根据自身的`flex-shrink`值进行缩小。
4.`flex-basis`：定义项目在分配多余空间之前的默认大小。

rem单位

rem（root em）是一个相对长度单位，它相对于根元素（html）的字体大小。使用rem单位可以让设计师更容易地控制页面的整体缩放，因为它只依赖于一个参考点——根元素的字体大小。

使用rem的优势

1. **一致性**：通过调整根元素的字体大小，可以统一控制整个页面的缩放比例，使得设计在不同.屏幕尺寸上保持一致性。
2. **可访问性**：对于视力不佳的用户，可以通过增大根元素的字体大小来提高页面的可读性。
3. **响应式设计**：rem单位使得创建响应式布局变得更加简单，因为只需要调整一个全局变量即可影响整个页面的布局。

 如何设置rem

通常，设计师会根据目标设备的屏幕尺寸来设置根元素的字体大小。例如，可以使用媒体查询来根据不同的屏幕宽度设置不同的字体大小。
 

html {
  font-size: 10px; /* 基准大小 */
}

@media screen and (min-width: 768px) {
  html {
    font-size: 12px; /* 平板设备 */
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 14px; /* 桌面设备 */
  }
}

在这个例子中，如果用户在桌面设备上查看页面，那么根元素的字体大小将被设置为14px。这意味着，如果页面上有一个元素的字体大小被设置为`1.5rem`，那么它的实际字体大小将是`1.5 * 14px = 21px`。

总结

Flex布局和rem单位是移动端布局的两个重要工具。Flex布局提供了一种灵活且强大的方式来创建复杂的布局，而rem单位则提供了一种简单有效的方法来控制页面的整体缩放。结合使用这两种技术，开发者可以创建出既美观又适应不同设备的响应式网页。