【无标题】

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>

五、布局技巧

  1. Flex布局适用场景

    • 导航栏
    • 卡片式布局
    • 表单元素
    • 垂直居中
    • 等分空间
  2. Rem单位使用技巧

    • 字体大小:font-size: 0.16rem;
    • 内外边距:padding: 0.2rem;
    • 宽高尺寸:width: 3rem;
    • 避免在border-width中使用rem(可能导致线条过细)
相关推荐
小样还想跑几秒前
axios无感刷新token
前端·javascript·vue.js
Java水解10 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982431 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210033 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员39 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_41 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子42 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a1 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心1 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq1 小时前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端