移动端基础之flex布局(二)

最新推荐文章于 2022-08-15 15:19:55 发布
最新推荐文章于 2022-08-15 15:19:55 发布
阅读量289 收藏
点赞数 1
分类专栏： # 移动端基础 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/116505054
版权
本文对比了传统布局和flex布局的优缺点，深入讲解了flex布局原理，包括主轴、侧轴的概念，以及justify-content、align-items等属性的用法。并详细介绍了在携程网移动端页面中如何应用flex布局，涵盖了搜索指数、焦点图、导航栏等多个区域的布局实现。
摘要由CSDN通过智能技术生成

传统布局与flex布局的比较

传统布局

  • 兼容性好
  • 布局繁琐
  • 局限性，不能在移动端很好的布局

flex布局

  • 操作方便，布局及其简单
  • pc端支持情况较差
  • IE11以下的版本 仅部分支持

注意事项

  • pc端页面布局 建议使用传统布局
  • pc端页面布局 如不考虑兼容性 可使用flex布局

flex布局原理

flex:弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局

采用flex布局的元素，被称为容器，它的所有子元素会自动成为容器成员，称为flex项目

注意事项

  • 当我们的父盒子设为flex布局之后，子元素的float clear 及vertical-align属性将失效
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            /* 使用flex布局 */
            display: flex;
            width: 80%;
            height: 400px;
            margin: 20px auto;
            background-color: purple;
            justify-content: space-around;
        }
        
        div span {
            /* 每个子元素占用1等分 */
            flex: 1;
            height: 60px;
            margin-right: 5px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

.

flex父项属性

flex-direction:设置主轴的方向

在flex布局中，分为主轴和侧轴

默认的主轴是x方向 水平向右

默认的侧轴是y轴 水平向下

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-direction</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            /* 设置flex属性 */
            display: flex;
            width: 1000px;
            height: 600px;
            margin: 200px auto;
            background-color: pink;
            /* 设置主轴方向 */
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            flex-direction: column-reverse;
        }
        
        span {
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            margin: 5px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

在这里插入图片描述

justify-content:设置主轴上子元素的排列方式

使用此属性之前 要确定主轴

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            /* 使用fiex属性 */
            display: flex;
            /* 设置主轴上子元素的排列方式 */
            justify-content: space-between;
            width: 80%;
            height: 400px;
            margin: 2px auto;
            background-color: purple;
        }
        
        span {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

在这里插入图片描述

flex-wrap:控制子元素是否换行

在flex布局中，容器中的子元素是一直不换行的，会一直在一行显示，宽度会变窄。

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-wrap</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            /* 设置flex属性 */
            display: flex;
            /* 设置子元素是否换行 */
            flex-wrap: wrap;
            width: 80%;
            height: 600px;
            margin: 20px auto;
            background-color: purple;
        }
        
        span {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 10px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
    </div>
</body>

</html>

在这里插入图片描述

align-items:设置侧轴上子元素的排列方式（适用于单行）

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-items</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            /* 设置flex布局 */
            display: flex;
            /* 设置主轴上的对齐方式*/
            justify-content: center;
            /* 设置侧轴上的对齐方式 */
            align-items: center;
            width: 80%;
            height: 500px;
            margin: 20px auto;
            background-color: pink;
        }
        
        span {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

align-content：设置侧轴上子元素的对齐方式（适合于多行）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: flex;
            /* 设置主轴上的子元素的对齐方式 */
            justify-content: center;
            /* 设置侧轴上的子元素的对齐方式 */
            align-content: center;
            /* 设置换行 */
            flex-wrap: wrap;
            width: 80%;
            height: 600px;
            margin: 20px auto;
            background-color: purple;
        }
        
        span {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

align-items与align-content的区别

在这里插入图片描述

flex-flow

flex-flow是flex-direction与flex-wrap的复合属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: flex;
            /* 设置主轴方向与是否换行 */
            flex-flow: row wrap;
            /* 设置主轴上的子元素的对齐方式 */
            justify-content: center;
            /* 设置侧轴上的子元素的对齐方式 */
            align-content: center;
            width: 80%;
            height: 600px;
            margin: 20px auto;
            background-color: purple;
        }
        
        span {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

flex子项属性

flex属性

flex属性定义flex容器的子元素占用的分数


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: flex;
            width: 80%;
            height: 600px;
            margin: 20px auto;
            background-color: purple;
        }
        
        span:nth-of-type(1) {
            /* flex表示占用的分数 */
            flex: 1;
            background-color: pink;
        }
        
        span:nth-of-type(2) {
            /* flex表示占用的分数 */
            flex: 2;
            background-color: yellow;
        }
        
        span:nth-of-type(3) {
            /* flex表示占用的分数 */
            flex: 1;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

align-self:定义子项在侧轴上的排列方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: flex;
            justify-content: center;
            width: 80%;
            height: 500px;
            background-color: pink;
            margin: 20px auto;
        }
        
        div span {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: yellow;
        }
        
        div span:nth-of-type(2) {
            /* 定义某个子项可以与其它项目在侧轴上拥有不一样的排列方式 */
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

order属性定义子项的排列顺序

数值越小，排名越靠前，默认为0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>order</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: flex;
            justify-content: center;
            width: 80%;
            height: 500px;
            background-color: pink;
            margin: 20px auto;
        }
        
        div span {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            border-radius: 50%;
            background-color: purple;
        }
        
        div span:nth-of-type(2) {
            /* 定义子项的排列顺序  值越小 排名越靠前*/
            order: -1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

在这里插入图片描述

携程网

在这里插入图片描述

初始化操作

技术选型

  • 采用单独制作移动端页面的案例
  • 使用flex布局

搭建文件夹结构

在这里插入图片描述

设置视口及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

body设置样式

body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

search-index区域

在这里插入图片描述

  • search-index设置固定定位 由两个div组成
  • 1号盒子为search区域 放大镜的技术是由伪元素 精灵图组合而成
  • 2号盒子为user区域 用户头像的技术是由伪元素 精灵图组合而成

focus(焦点图)区域

在这里插入图片描述

  • div嵌套一张图像即可 图像的宽度设置为100%

local-nav(局部导航栏)区域

在这里插入图片描述

在这里插入图片描述

  • div嵌套ul ul嵌套5个li 每个li占1等份 li嵌套a a嵌套两个span
  • 图像使用的精灵图技术 可以使用属性选择器更加合适快捷

nav(导航栏)区域

在这里插入图片描述

  • 大盒子为nav nav嵌套nav-common(导航公共部分) nav-common包含nav-item nav-item包含a标签
  • a里面的文字设置水平垂直居中
  • 白色的缝隙是由边框组成

sidebar-nav(侧边栏导航)区域

在这里插入图片描述
在这里插入图片描述

  • div嵌套ul ul嵌套li li嵌套a a嵌套span

sell-box(销售)区域

在这里插入图片描述

  • sell-box由两部分组成
  • 1号盒子为sell-hd 里面包含h2与a链接 图像使用的是伪元素选择器
  • 2号盒子为sell-bd 里面包含div div包含a a包含img

footer(页脚)区域

在这里插入图片描述

  • div嵌套ul ul嵌套li li占用1等份 li嵌套span span设置背景图像

copyright(版权)区域

在这里插入图片描述

  • div嵌套p 设置居中对齐即可

效果图
在这里插入图片描述

「已注销」
关注
专栏目录
移动端之flex布局
yexiangCSDN的专栏
05-10 467
一、移动端之flex布局 1. 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 建议： 1. 如果是PC端页面布局，我们还是传统布局 2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 2.flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，...
前端学习笔记：移动端布局之flex布局
weixin_43339892的博客
02-17 532
flex布局 flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align 属性将失效 flex布局=伸缩布局=弹性布局=伸缩盒布局=弹性盒布局 ...
帧动画-红绿灯
m0_65480869的博客
08-15 202
html帧动画实现红绿灯
手机移动端侧边栏滑出导航菜单
06-04
手机移动端侧边栏滑出导航菜单
flex布局
Sometimes_Ymc的博客
05-07 1048
flex 布局 css 缩放
移动端携程首页制作
qq_44757223的博客
04-07 3420
移动端携程首页制作 背景线性渐变
flex下部固定高，上部不固定，而且超过内容要滚动
12-19 417
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Title</title> ...
移动端web开发flex布局案例
04-07
在移动端Web开发中，Flex布局（Flexible Box布局）是一种强大的CSS布局模式，旨在提供更灵活的盒模型，以便在各种屏幕尺寸和设备上创建响应式布局。本案例将深入探讨Flex布局的应用，以及如何利用它来优化移动端网页...
移动端布局——Flex布局
m0_45659764的博客
04-02 2111
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
移动端优先的flex三栏布局的使用方法
12-03
总的来说，移动端优先的Flexbox三栏布局的关键在于理解并灵活运用`display: flex`, `flex-wrap`, `flex`, `order`以及`@media`查询这些CSS属性。通过它们，开发者可以构建出高度响应式的网页布局，以满足现代Web设计...
DAY 14 | 自学前端第十四天
pangpangcm的博客
04-27 160
今天学移动端开发flex布局。
移动端特点(重点)~~~
weixin_57320268的博客
02-12 1204
1 移动端特点 PC端 屏幕大，网页固定版心 浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流） 移动端 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性 2 物理分辨率和逻辑分辨率 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率 3 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域..
Nav：导航
weixin_43706224的博客
05-24 440
前端学习之携程网移动端首页制作
Cai_Smallwhite的博客
10-20 4934
目录1、准备工作2、搜索模块制作3、焦点图模块制作4、1.1 技术选型1.2 搭建相关文件（夹）1.3 设置视口标签以及引入初始化样式2.1 布局分析2.2 user用户小模块 1、准备工作 2、搜索模块制作 3、焦点图模块制作 4、 1.1 技术选型 方案：采取单独制作移动端页面方案 技术：布局采取flex布局 1.2 搭建相关文件（夹） 1.3 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, initial-s
flex布局 保姆级入门教程
qq_43440751的博客
04-19 463
1.flex布局与传统布局 1.传统布局：兼容性好，布局繁琐，有一定局限性，不能再移动端良好布局 2.flex弹性布局：布局简单，移动端应用广泛。PC端浏览器支持情况较差 2.flex布局原理 1.flex是flexible Box的缩写，意味“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设定flex布局以后，子元素的float,clear和vertical-align属性将失效 2.采用flex布局的元素称为Flex容器，它的所有子元素自动成为容器成员，
GlusterFS系统中文管理手册
枫之谷-技术园
11-06 1003
该文档为实实在在的原创文档，转载请注明： http://blog.sina.com.cn/s/blog_8c243ea30101kkig.html 类型 详细 备注 该文档是GlusterFS的系统管理指导手册，相应使用过程中的一些经验及一些容易犯错或者理解错误的问题提示。     相关描述 ²  其他相关文档请参考新浪博客http://blog.sina.
移动手机端布局：flex
Yangjiaqi111的博客
02-21 219
体验flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> div { display:
flex布局总结
LOxia的博客
03-22 2182
flex基础知识及携程网布局案例全部代码
ARKit（iOS的增强现实）：ARKit的物体检测与空间映射.docx
最新发布
11-01
ARKit（iOS的增强现实）：ARKit的物体检测与空间映射
移动端开发 flex布局
09-01
- *1* *2* *3* [移动端之flex布局](https://blog.csdn.net/yexiangCSDN/article/details/116591641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值