移动WEB开发之Flex布局：从入门到实战，一篇搞定 !

🌟 为什么选择Flex布局？

传统布局（如浮动、定位）在移动端适配时繁琐且兼容性差，而Flex布局凭借以下优势成为移动端开发的首选：

• 简单高效：几行代码实现复杂布局
• 响应式适配：自动适应不同屏幕尺寸
• 主流支持：现代浏览器全面兼容（IE10+需前缀）

---

一、Flex布局核心概念 📦

1. 容器与项目

• Flex容器：通过 display: flex 定义的父元素
• Flex项目：容器内的直接子元素

2. 主轴与侧轴

• 主轴：默认水平方向（flex-direction: row）
• 侧轴：默认垂直方向
• 特点：主轴方向可通过属性修改，项目沿主轴排列

---

二、父容器属性详解 🛠️

1. 主轴方向：flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

值	效果
row（默认）	水平从左到右
column	垂直从上到下

---

2. 主轴对齐：justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• space-between：两端对齐，项目间隔相等
• space-around：项目两侧间隔相等

---

3. 侧轴对齐：align-items（单行）

.container {
  align-items: stretch | flex-start | flex-end | center;
}

• stretch（默认）：项目拉伸填满容器高度
• center：垂直居中（移动端高频用法）

4. 多行对齐：align-content

.container {
  align-content: flex-start | center | space-between;
}

• 需配合 flex-wrap: wrap 使用

---

三、子项目属性解析 🧩

1. 分配剩余空间：flex

.item {
  flex: <number>; /* 默认0，按比例分配剩余空间 */
}

• 经典场景：导航栏平均分布

.nav-item { flex: 1; } /* 所有导航项等宽 */

2. 自定义对齐：align-self

.item {
  align-self: flex-start | center | flex-end;
}

• 覆盖父容器的 align-items 设置

3. 排序控制：order

.item { order: <number>; } /* 数值越小越靠前 */

---

四、实战：携程移动端首页案例 🚀

1. 技术选型

• 布局方案：Flex弹性布局
• 适配方案：Viewport + 百分比 + 最大宽度限制

2. 核心代码

HTML结构

<!-- 顶部导航 -->
<header class="header">
  <div class="search-box"></div>
  <div class="user-icon"></div>
</header>

<!-- 主内容区 -->
<main class="main">
  <div class="banner"></div>
  <nav class="service-nav">
    <a href="#">酒店</a>
    <a href="#">机票</a>
    <a href="#">旅游</a>
  </nav>
</main>

CSS样式

/* 父容器：水平排列+垂直居中 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 10px;
}

/* 子项目：自动分配剩余空间 */
.service-nav {
  display: flex;
}
.service-nav a {
  flex: 1;
  text-align: center;
  padding: 10px;
}

---

五、避坑指南 ⚠️

1. 旧版浏览器兼容：

   .container {
     display: -webkit-flex; /* Safari */
     display: flex;
   }
   

2. 内容溢出处理：

   .container {
     flex-wrap: wrap; /* 允许换行 */
     overflow: hidden;
   }
   

3. 固定尺寸项目：

   .fixed-item {
     flex: 0 0 100px; /* 不放大/不缩小/固定100px */
   }
   

---

🎯 总结与资源

• Flex核心口诀：
  父容器控方向，justify-content定主轴，align-items管侧轴，子项目flex分空间。
• 延伸学习：
  • Flex布局小游戏
  • MDN Flex文档

立即行动：用Flex布局重构你的移动端页面吧！遇到问题？欢迎评论区讨论 💬