Flex布局应用（1）——为什么flex只能做移动端APP开发？

最新推荐文章于 2025-06-21 13:47:03 发布
最新推荐文章于 2025-06-21 13:47:03 发布
阅读量8.8k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Flex布局 文章标签： flex 原生APP 混合APP web APP flex兼容性问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zxy9602/article/details/53173340
本文分析了原生APP、混合APP和WEB APP的差异，指出移动端和PC端在用户交互、数据量及用户体验上的区别。特别讨论了在移动端APP中使用Flex布局的原因，尽管存在如PC端IE低版本不支持和部分移动端浏览器兼容性问题，但移动端仍广泛采用Flex以优化布局和节省流量。

1、APP的分类

（1）原生APP

（2）混合APP

（3）WEB APP


2、PC端和移动端的差别

（1）用户交互方式不同：表现在鼠标、手指

（2）呈现的数据量不同：

PC端——屏幕大、内容多

移动端——内容少

（3）用户体验上不同

最低0.47元/天 解锁文章

新学期VIP享超值加赠
移动端布局——Flex布局
m0_45659764的博客
04-02 2198
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
04-移动端开发及布局
weixin_55702682的博客
05-30 904
原生应用由于利用的是官方提供的语言和工具并且能够直接操控硬件设备（比如多点触控、NFC、读取短信等），在应用性能上和交互体验上应该是最好的，但是原生应用的可移植性比较差，特别是一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套。现在还可以利用uniapp,进行更多平台的支持。混合应用开发正是结合原生和H5开发的技术，取长补短的一种开发模式，原生代码部分利用WebView插件或者其它的框架为H5提供了一个容器，程序主要的业务实现、界面展示是利用H5相关的Web技术进行实现的。
为移动端设计基于Flex的UI框架
08-10
为移动端设计，基于 Flex 的 UI 框架。现代化：基于 Flex 设计，支持移动端全部主流浏览器，支持 Android 微信内置浏览器；
移动端的布局：flex布局
cmy_1994的博客
03-17 992
一、简单介绍flex Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为Flex布局。 Webkit内核的浏览器，必须加上-webkit前缀。 ***注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 .parent {display:-webkit-flex;}
Flex布局全掌握：从基础到实战指南
最新发布
weixin_42146230的博客
06-21 1046
在现代前端开发中，布局技术是构建界面的关键组成部分。Flex布局，全称为弹性布局（Flexible Box Layout），是一种简洁、强大的布局方式，尤其适用于响应式设计。相较于传统的浮动（float）布局，Flex布局提供了更直观、灵活的对齐和空间分配方案。在Flex布局中，容器是包含其他项目的父元素，它通过设置或属性成为Flex容器。容器属性定义了项目在容器内的布局方式，包括项目的排列方向、换行方式、对齐方式以及对项目之间空间的分配等。：定义主轴的方向（项目排列的顺序），可以取。
移动端：（弹性布局）flex布局
illion booked
05-12 664
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活
flex-常见移动端布局
IT子也
03-06 1202
最近在开发一个微信小程序的项目，用flex布局那叫一个爽，这里记录一下心得。 这里不再累诉flex的基础知识了(可以到以下链接学习，网上有很多) http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/494230cd4a72 1、九宫格 <style type="text...
移动端flex布局经验总结
qq_44441669的博客
08-03 614
flex布局（弹性布局） 2.布局原理 2.1 flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=flex布局。 总结flex布局原理： 就是通过给父盒子添加flex属性，来控制...
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1472
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
极简flex移动布局样式包，提升APP混合开发效率
4. Flex布局在APP混合开发中的应用： - 在使用如React Native、Flutter等框架开发APP时，Flex布局是一种基础且重要的布局方式。 - 它允许开发者以简单的方式定义复杂的布局，实现跨平台的UI组件。 - 使用Flex布局...
快速了解移动端常用布局：flex布局
qq_39025670的博客
11-11 455
本文介绍了flex布局中常用的属性 display: flex; 代码： <section class="container"> <style> .container{ display: flex; } .box{ width: 100px; height: 100px; } ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
weixin_30661579的博客
06-10 393
viewport视口viewport是严格的等于浏览器的窗口。viewport与跟viewport有关的meta标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深刻理解，viewport与布局的关系，能够看下这篇文章：在移动浏览器中使用viewport元标签控制布局css1. flex布局flex简介之因此把flex布局放在第一位，是由于它在某些场景下确实很方便，好比垂直居中，...
Flex布局学习完成PC端
小琳爱分享的博客
07-26 620
Flex布局学习完成PC端
flex布局
weixin_30597269的博客
08-20 223
Flex语法 Flex布局意为"弹性布局"，用来为盒模型提供更多灵活性。此外，Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex;)生效，需要注意的是，如果父元素设置了Flex容器，则子元素的float、clear和vertical-align属性将失效。 Flex布局需要注意下面几个重要的概念，结合下面这张图也许能更好的理解:...
前端技术—9.flex布局
不放手，不错过的博客
08-02 359
flex布局基本属性及概念
Flex移动开发第一步(Flex Mobile View and ViewNavigator组件学习笔记)
九天之凤
08-22 1463
历史背景     在传统的Flex AIR桌面应用程序开发中，我们有足够的屏幕分辨率以及系统资源来在屏幕下填充足够的信息已满足我们的开发需求。通过采用分层菜单和弹出窗口，我们可以在屏幕上堆砌足够多的信息。与此相比，智能手机的屏幕感觉像stamp。由于分辨率以及不同设备DPI的影响，Flex mobile开发通常采用Screen Split技术，将页面切分成很多部分来展示。Flex mobil
flex布局（上）
weixin_48692423的博客
09-08 430
flex主轴与侧轴的布局方法
基于BootStrap 4.x 中的Flex 实现各种布局
weixin_33857679的博客
11-24 930
各种布局，总有一款适合你 基于bootstrap 4.x 中的flex 布局 1、左右结构（左窄右宽） &lt;div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"&gt; &lt;div region="west" class="west" style="w
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值