flex布局大全 2019
有句话叫做:存在即是合理。
最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考。
鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的,也没有几个可以自己试着写写的界面,其实国内还是比较藏珍,看看码云上就知道了,一搜索基本没什么开源项目(比如搜flex布局 demo),在github上面倒是有,就是没遇到合适的。
仔细想来写前端静态界面,大体上是可以公用的嘛,为啥老是要重复造轮子了。包括我自己写的界面,静态界面出来了,然后又去掉,改成动态的,问题就出在这里了,应该把常用的静态界面提取出来,或者放到一个开源的项目里面,大家有需求了,自己改改,基本就可以直接使用了。
(比如用flex来写:
1.上 中 下三栏, 底部和顶部固定
2.九宫格效果
3.左边一张商品图片,然后右边放商品属性(三排属性,和图片等高)
4.左边一张商品图片,然后右边放商品属性,最右边放一些标识
5.左边一张图片,右边两行文字,等高显示。)表示自己是经常写,也经常忘,总是在纠结用那种布局方式写达到的效果最好(欢迎大家留言讨论一下,真的手机端界面很多的嘛)。
做项目的时候总想着,有git管理工具,以后需要了,直接检出对应的分支就行了,但是时间久了,鬼知道你需要检出哪个分支,我就属于这样的情况。不是我过于粗心,主要有时五六个项目切换,你不晕都是假的,往往一个项目周期短则半月长则几个月。
所以鉴于上述情况,首先开了一个专题,单独收集整理相关的布局效果,第二步,需要把相应的文章或者链接整理到这个专题里面,第三步,在github或者码云上面建立一个项目,(话说一个项目如何分享到两个仓库呢?鉴于国内网络问题,还是放到码云上面比较好一点)第four步,把遇到的布局和问题归类拆解出来(这个比较费时间),独立成一个个小工具,小组件。
另外就是,关于字体文件,为什么html不能直接如同H标签一样声明呢?比如font12 表示 font-size:12px的大小的字体。这样就不需要前端自己定义一套字体大小库了,另外还得一套粗体,一套500的。
参考地址1:https://blog.csdn.net/qq_34648000/article/details/79115294
flex布局大全 2019的更多相关文章
- 【原创】display:flex布局大全
全都是自己写的 希望大家可以点个赞 谢谢! Html代码(没时间精简 请多包涵) <!DOCTYPE html> <html lang="en"> < ...
- flex布局大全
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- Kotlin协程重要概念详解【纯理论】
在之前对Kotlin的反射进行了详细的学习,接下来进入一个全新的篇章,就是关于Koltin的协程[coroutine],在正式撸码之前先对它有一个全面理论化的了解: 协程的定义: 协和通过将复杂性放入 ...
- C# CefSharp如何在Winforms应用程序中使用
最近做了一个很小的功能,在网页上面打开应用程序,用vs的debug调试,可以正常打开应用程序,可布置到iis上面却无法运行应用程序,吾百度之,说是iis权限问题,吾依理做之,可怎么折腾也不行.最后bo ...
- 状压dp之位运算
## 一.知识 1.我们知道计算机中数据由二进制数存储,一个二进制数的一位就是计算机中数据的最小单位bit,我们有一种运算符可直接对二进制数进行位运算,所以它的速度很快. 2.C++中的位运算符有6种 ...
- python爬虫中涉及json数据的处理
在执行爬虫项目的过程中,有时返回的不是一个html页面而是json格式数据,此时对数据的解析非常重要. 1.Json格式数据的爬取 采用request对以上的url进行爬取: import re ...
- python 批量打印PDF
有一批PDF文件,好几百个,每个只打印第2,3页,双面打印. 网上搜索一波,方案如下: 安装Ghostscript,GhostView,使用gsprint命令打印pdf文件. gsprint命令参数说 ...
- django-mysql事务
django文档:https://yiyibooks.cn/xx/django_182/topics/db/transactions.html mysql事务 1) 事务概念 一组mysql语句,要么 ...
- 小a的学期 (组合数取模模板)
题目描述 小a是一个健忘的人,由于他经常忘记做作业,因此老师对他很恼火. 小a马上就要开学了,他学期一共2n 天,对于第i天,他有可能写了作业,也可能没写作业,不过他自己心里还有点B数,因此他会写恰好 ...
- Joint Approximative Diagonalization of Eigen matrix (JADE)
特征矩阵联合相似对角化算法[1]. Cardoso于1993年提出的盲信号分离具有代表性的一种算法.是一种基于四阶累积量特征矩阵近似联合对角化盲分离算法.该算法将目标函数最大化问题等价于一组四阶累积量 ...
- cjss 像编写css 一样开发web应用
cjss 提供了使用类似css 的方式编写web 应用 cjss 包含的阶段 data prepare body element 几点说明 并不是所以阶段必须使用,但是每个级别只能存在一个script ...
- PDE工具箱的简单使用
转载自Here matlab的PDE工具箱的简单使用 问题选择 边界条件选择 菜单按钮和简单使用 命令行输入pdetool,打开GUI编辑界面如下: 注意到工具栏上,就是我们要用到的,从左到右依次使用 ...