【无标题】 - 技术栈

Flex布局与Rem布局

一、为什么需要学习Flex和Rem布局？

在移动互联网时代，网页需要在各种设备上完美呈现。传统布局方式（如float、position）在响应式设计上存在局限，而Flex布局提供了更强大的排列对齐能力，Rem布局则解决了多设备尺寸适配问题。

二、Flex布局

Flex布局（弹性盒子布局）是CSS3中用于页面布局的全新模块，特别适合一维布局场景。

1. 基本概念

html 复制代码

<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>

2. 核心属性

容器属性：

css 复制代码

.flex-container {
  display: flex; /* 开启flex布局 */
  flex-direction: row; /* 主轴方向：row | row-reverse | column | column-reverse */
  justify-content: center; /* 主轴对齐方式：flex-start | flex-end | center | space-between | space-around */
  align-items: center; /* 交叉轴对齐方式：flex-start | flex-end | center | baseline | stretch */
  flex-wrap: wrap; /* 换行：nowrap | wrap | wrap-reverse */
}

项目属性：

css 复制代码

.flex-item {
  flex: 1; /* 简写属性：flex-grow | flex-shrink | flex-basis */
  align-self: flex-start; /* 单个项目对齐方式 */
  order: 2; /* 项目排列顺序 */
}

三、Rem布局

Rem（Root em）是相对于根元素(html)字体大小的单位，是实现响应式布局的关键技术。

基本用法

css 复制代码

html {
  font-size: 16px; /* 基准值 */
}

.element {
  width: 10rem; /* 10 × 16px = 160px */
}

四、Flex + Rem完美结合

1. 结合优势

Flex：解决元素排列、对齐问题
Rem：解决尺寸适配问题
组合效果：完美实现响应式布局

2. 实战：响应式导航栏

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex + Rem布局实例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      /* 动态字体大小由JS设置 */
      font-size: 16px; /* 默认值 */
    }
    
    .nav {
      display: flex;
      justify-content: space-around;
      background-color: #3498db;
      padding: 0.5rem 0; /* 使用rem单位 */
    }
    
    .nav-item {
      flex: 1;
      text-align: center;
      color: white;
      font-size: 0.16rem; /* 相当于16px */
      padding: 0.2rem 0;
      border-right: 1px solid rgba(255,255,255,0.3);
    }
    
    .nav-item:last-child {
      border-right: none;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <div class="nav-item">首页</div>
    <div class="nav-item">产品</div>
    <div class="nav-item">服务</div>
    <div class="nav-item">关于</div>
    <div class="nav-item">联系</div>
  </nav>
  
  <script>
    // 动态设置rem基准值
    function setRem() {
      const html = document.documentElement;
      const width = html.clientWidth;
      // 设计稿宽度750px，分成7.5份
      html.style.fontSize = width / 7.5 + 'px';
    }
    
    setRem();
    window.addEventListener('resize', setRem);
  </script>
</body>
</html>

五、布局技巧

Flex布局适用场景：
- 导航栏
- 卡片式布局
- 表单元素
- 垂直居中
- 等分空间
Rem单位使用技巧：
- 字体大小：font-size: 0.16rem;
- 内外边距：padding: 0.2rem;
- 宽高尺寸：width: 3rem;
- 避免在border-width中使用rem（可能导致线条过细）