CSS3单独制作移动端页面布局方式(流式布局、flex弹性布局)

目录

  • 1. 流式布局(百分比布局)
  • 2. flex弹性布局(强烈推荐)
    • 2.1 介绍
    • 2.2 Flex容器常见属性
      • 2.2.1 flex-direction
      • 2.2.2 justify-content
      • 2.2.3 flex-wrap
      • 2.2.4 align-items
      • 2.2.5 align-content
      • 2.2.6 flex-flow
    • 2.3 Flex项目常见属性
      • 2.3.1 flex
      • 2.3.2 align-self和order

1. 流式布局(百分比布局)

  • 流式布局，也称百分比布局，不给盒子的宽度和高度设定固定的像素，而是将盒子的宽度和高度设置为父盒子宽度和高度的百分比，达到根据屏幕的宽度来伸缩
  • 为了防止盒子无限伸缩，可以给盒子设定最小、最大宽度和高度
    • min-width: 400px;: 最小宽度
    • max-width: 800px;: 最大宽度
    • min-height: 400px;: 最小高度
    • max-height: 800px;: 最大高度

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Title</title><style>* {margin: 0;padding: 0;}section {width: 100%;max-width: 800px;min-width: 400px;margin: 0 auto;}section div {float: left;width: 50%;height: 100px;}section div:nth-child(1) {background-color: pink;}section div:nth-child(2) {background-color: purple;}</style>
</head><section><div></div><div></div></section>
</html>
  1. 当设备足够宽时，section盒子最大为800px宽，如下所示:
    section盒子最大宽度
  2. 当设备的宽度只有600px时，section盒子自适应宽度100%为600px，如下所示
    section盒子自适应宽度100%3. 设备的宽度只有200px时，section盒子最小宽度为400px。设备出现滚动条，需要拖动才能看整个页面。如下所示
    设备的宽度只有200px时

2. flex弹性布局(强烈推荐)

2.1 介绍

特点:

  • 布局极为简单，移动端应用很广泛
  • PC端浏览器支持情况较差，特别是IE 11或更低版本，不支持或仅部分支持

原理:

  • 为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
  • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
  • 采用Flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目。项目可以设置宽和高

2.2 Flex容器常见属性

2.2.1 flex-direction

默认主轴水平向右，辅轴垂直向下。设置主轴的方向(即项目排列的方向)，另一个轴就是辅轴。可选的值有row(默认，从左到右)、row-reverse(从右到左)、column(从上到下)、column-reverse(从下到上)

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;flex-direction: column-reverse;}div span {width: 150px;height: 100px;background-color: yellow;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

效果如下。盒子竖着从下往上排列
flex-direction效果

2.2.2 justify-content

设置主轴上的子元素排列方式。可选参数如下表：

属性默认值
flex-start默认值。从方向的头部开始排列
flex-end从方向的尾部开始排列。如果主轴是x轴向左，则靠左排列
center在主轴居中对齐
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;justify-content: flex-end;}div span {width: 150px;height: 100px;background-color: yellow;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

效果如下。靠方向的尾部排列
justify-content效果

2.2.3 flex-wrap

设置子元素是否换行。默认nowrap(不换行，放不下会将子元素宽度或高度进行压缩进行自适应)； 另一个可选择wrap(换行)，如果侧轴是y轴，换行成两行，则将父元素分成上下两块

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;flex-wrap: nowrap;}div span {width: 150px;height: 100px;background-color: yellow;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>
</html>

效果如下。父盒子宽度为600，子盒子宽度为150。其实是放不下5个的，nowrap让盒子宽度自适应到120进行排列显示
flex-wrap

2.2.4 align-items

  • 在子项为单行的时候使用，设置侧轴上的子元素排列方式
  • 如果没有设置align-content，将每一行当作单行，align-items也有效果
  • 对于多行，如果同时设置了align-items和align-content，则align-content优先
属性值说明
flex-start从上到下。如果子元素有了宽度或高度，则默认是这个
flex-end从下到上
center垂直居中
stretch拉伸(默认值)。子元素设置了宽度或高度，则不会拉伸至父元素的宽度或高度

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;align-items: center;}div span {width: 150px;height: 100px;background-color: yellow;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

效果如下。子盒子在侧轴居中排列
align-items效果

2.2.5 align-content

在子项为换行成多行的时候使用，对单行无效，设置侧轴上的子元素的排列方式

属性值说明
flex-start在侧轴的头部开始排列。如果子元素有了宽度或高度，则默认是这个
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度(默认值)。子元素设置了宽度或高度，则不会平分父元素的宽度或高度

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;flex-wrap: wrap;align-content: space-between;}div span {width: 150px;height: 100px;background-color: yellow;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>
</html>

效果如下。两行贴着两头
align-content效果

2.2.6 flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;flex-flow:column wrap;}div span {width: 150px;height: 100px;background-color: yellow;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>
</html>

效果如下：
flex-flow效果

2.3 Flex项目常见属性

2.3.1 flex

各子项目使用flex定义分配父盒子主轴剩余空间的份数，就能得到总份数，和子项目所占的百分比。flex默认是0

也可以使用flex: 20%;，直接表示子盒子分配父盒子的百分比。如有10个子盒子，每个子盒子宽度分配20%，则分两行排列

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;}div span {flex: 1;height: 100px;background-color: yellow;}div span:nth-child(2) {flex: 2;background-color: red;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

效果如下。子盒子没有给宽度，1号和3号盒子占一份，2号盒子占两份，三个盒子平分主轴剩余空间
flex效果

2.3.2 align-self和order

  • align-self: 单独控制某个子项自在侧轴的排列方式，覆盖align-items属性。默认为auto，表示继承父元素的align-items
  • order: 属性定义子项目的排列顺序。数值越小，排列越靠前，默认为0

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;}div span {width: 150px;height: 100px;background-color: yellow;}div span:nth-child(2) {align-self: center;order: -1;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

效果如下。2号盒子单独居中排列，2号盒子排列在最前面
align-self和order效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/718350.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

银河麒麟之Workstation安装

银河麒麟之Workstation安装

一、VMware Workstation简介 VMware Workstation是一款由VMware公司开发的虚拟化软件&#xff0c;它允许用户在一台物理计算机上运行多个操作系统&#xff0c;并在每个操作系统中运行多个虚拟机。VMware Workstation提供了一个可视化的用户界面&#xff0c;使用户可以轻松创建、…
阅读更多...
程序环境和预处理（2）

程序环境和预处理（2）

文章目录 3.2.7 命名约定 3.3 #undef3.4 命令行定义3.5 条件编译3.6 文件包含3.6.1 头文件被包含的方式3.6.2 嵌套文件包含 4. 其他预处理指令 3.2.7 命名约定 一般来讲函数和宏的使用语法很相似&#xff0c;所以语言本身没法帮我们区分二者&#xff0c;那我们平时的一个习惯是…
阅读更多...
linux条件判断之if-then

linux条件判断之if-then

if..then是最常见的条件判断语句&#xff0c;简而言之&#xff0c;就是当符合某个条件判断的时候&#xff0c;就予以进行某项工作。 1.if-then格式 if-then格式1&#xff1a; if [ 条件判断表达式 ];then 当条件判断表达式成立时&#xff0c;需执行的命令 fi if-then格式2…
阅读更多...
Redis安全加固策略：绑定Redis监听的IP地址 修改默认端口 禁用或者重命名高危命令

Redis安全加固策略：绑定Redis监听的IP地址 修改默认端口 禁用或者重命名高危命令

Redis安全加固策略&#xff1a;绑定Redis监听的IP地址 & 修改默认端口 & 禁用或者重命名高危命令 1.1 绑定Redis监听的IP地址1.2 修改默认端口1.3 禁用或者重命名高危命令1.4 附&#xff1a;redis配置文件详解&#xff08;来源于网络&#xff09; &#x1f496;The Beg…
阅读更多...
驱动开发面试复习

驱动开发面试复习

创建字符设备 1 创建设备号 alloc_chrdev_region 2.创建cdev cdev_init 3.添加一个 cdev,完成字符设备注册到内核 cdev_add 4.创建类 class_create 5.创建设备 device_create 1.内核空间与用户空间数据 copy_from_user 和copy_to_user 俩个函数来完成。 copy_from_user 函数…
阅读更多...
618快递准点到达，别忘了感谢它！

618快递准点到达，别忘了感谢它！

进入6月以来&#xff0c;全国快递日均业务量飞速上涨。 虽然618大促是电商的主场&#xff0c;但作为不可或缺的物流环节&#xff0c;为了这场年中大考&#xff0c;快递企业在此期间也使尽浑身解数&#xff0c;竞相比拼配送速度。那么&#xff0c;为了更快的时效&#xff0c;快递…
阅读更多...
uniapp 的video播放如何实现小窗功能

uniapp 的video播放如何实现小窗功能

在页面中使用<video>组件来展示视频&#xff0c;并设置好相应的属性和事件监听&#xff1a; <video src"video.mp4" play"onVideoPlay" pause"onVideoPause"></video>在页面的data中定义一个变量来表示是否开启小窗模式&#…
阅读更多...
【Wio Terminal】使用WiFi（3）- Wi-F的高级使用

【Wio Terminal】使用WiFi（3）- Wi-F的高级使用

使用WiFi&#xff08;3&#xff09; Wi-F的高级使用HTTPClient 的使用HTTP GETHTTPs GETHTTP POSTWebServerHTTP Authentication Web ServerDNSServermDNSmDNS-SDWiFiManager Wi-F的高级使用 本节介绍了一些WiFi的高级库用法&#xff0c;如HTTPClient、DNSServer和WebServer库…
阅读更多...
美国亚利桑那州立大学宣布与OpenAI建立合作伙伴关系！

美国亚利桑那州立大学宣布与OpenAI建立合作伙伴关系！

美国亚利桑那州立大学 (Arizona State University) 在官网宣布—— 将与OpenAI建立合作伙伴关系&#xff01; 该校也成为了第一个与OpenAI合作的高等教育机构。 来源&#xff1a;亚利桑那州立大学官网 亚利桑那州立大学校长表示&#xff1a; “我们认识到人工智能系统将持续…
阅读更多...
高并发IO底层原理浅析（四）

高并发IO底层原理浅析（四）

Java NIO中的Selector&#xff08;选择器&#xff09;是一个用于检测多个非阻塞通道&#xff08;Channel&#xff09;是否准备就绪进行读写操作的关键组件&#xff0c;它实现了I/O多路复用技术。在单个线程中&#xff0c;Selector可以监听和管理多个Channel上的事件&#xff0c…
阅读更多...
Redis安全加固策略：配置文件权限设置 配置本地日志存储目录 连接超时时间限制

Redis安全加固策略：配置文件权限设置 配置本地日志存储目录 连接超时时间限制

Redis安全加固策略&#xff1a;配置文件权限设置 & 配置本地日志存储目录 & 连接超时时间限制 1.1 配置文件权限设置1.2 配置本地日志存储目录1.3 连接超时时间限制 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1.1 配置文件权限…
阅读更多...
如何理解template＜size_t N＞？

如何理解template＜size_t N＞？

template<size_t N> 是C中的模板参数&#xff0c;用于定一个非类型参数的值。它可以在编译时确定&#xff0c;并且可以在编译时进行计算和使用。 例如&#xff0c;我们可以定义一个模板函数&#xff0c;接受一个大小为N的数组作为参数&#xff1a; template<size_t …
阅读更多...
Qt/事件分发器/事件过滤器

Qt/事件分发器/事件过滤器

事件分发器 //事件分发器bool event(QEvent* e); //事件分发器&#xff1a;&#xff1a;用途 分发事件 bool MyLabel::event(QEvent* e) {if(e->type() QEvent::MouseButtonPress){//如果是鼠标摁下 拦截事件 不向下分发QMouseEvent* ev static_cast<QMouseEvent*>…
阅读更多...
Qt-Qss 样式表属性大全

Qt-Qss 样式表属性大全

目录 前言 源码文件信息 QSS属性大全 1.控件常用的属性 2.控件常用属性值 3.控件常用状态 4.其他 前言 相信很大一部分开发者真的被Qt样式表的属性搞挺头痛的&#xff01; 一方面Qss的示例Demo太过简单&#xff0c; 另一方面&#xff0c;Qss的所有属性在Qt的官方文…
阅读更多...
软考高级：逆向工程相关概念和例题

软考高级：逆向工程相关概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…
阅读更多...
Deeplearning4j【基础 01】初识Java深度学习框架DL4J

Deeplearning4j【基础 01】初识Java深度学习框架DL4J

初识Java深度学习框架DL4J 1.起因2.简介3.组件3.1 Deeplearning4j/ScalNet3.1.1 Deeplearning4jf&#xff08;Java&#xff09;3.1.2 ScalNet&#xff08;Scala&#xff09; 3.2 ND4J/LibND4J3.3 SameDiff3.4 DataVec3.5 Arbiter3.6 RL4J 4.总结 内容来自网络&#xff0c;基于官…
阅读更多...
Redis--线程模型详解

Redis--线程模型详解

Redis线程模型 Redis内部使用的文件事件处理器&#xff08;基于Reactor模式开发的&#xff09;file event handler是单线程的&#xff0c;所以Redis线程模型才叫单线程模型&#xff0c;它采用IO多路复用机制同时监听多个socket&#xff0c;当被监听的socket准备好执行accep、r…
阅读更多...
072：vue+cesium 实现下雪效果

072：vue+cesium 实现下雪效果

第072个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中实现下雪效果，这里使用着色器来实现实例特效。 直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码（共120行）着色代码实现心得：专栏目标示例效果
阅读更多...
Python世界之附加

Python世界之附加

一、数据类型转换 1.隐式类型转换 在隐式类型转换中&#xff0c;Python 会自动将一种数据类型转换为另一种数据类型。 对两种不同类型的数据进行运算&#xff0c;较低数据类型就会转换为较高数据类型以避免数据丢失。 2.显式类型转换 在显式类型转换中&#xff0c;用户将对…
阅读更多...
Linux设置静态IP地址

Linux设置静态IP地址

在Linux系统中设置静态IP地址的步骤如下&#xff1a; 1.使用管理员权限登录系统。 2.编辑网卡配置文件&#xff1a; 网卡配置文件通常位于 /etc/sysconfig/network-scripts/ 目录下&#xff0c;可以使用命令 cd /etc/sysconfig/network-scripts 切换到该目录。 …
阅读更多...
最新文章

Copyright @ 2022~2023