有句话叫做:存在即是合理。

最近很喜欢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的更多相关文章

  1. 【原创】display:flex布局大全

    全都是自己写的 希望大家可以点个赞 谢谢! Html代码(没时间精简 请多包涵) <!DOCTYPE html> <html lang="en"> < ...

  2. flex布局大全

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  3. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  4. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  5. CSS3与页面布局学习总结(四)——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  7. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  8. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  9. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. Python - 2和3的区别

    编码: Python2的默认编码是ASCII码,这是导致Python2中经常遇到编码问题的主要原因之一,至于原因,在于Python这门语言出现的时候,还没有Unicode! Python3默认编码是U ...

  2. myslq数据库用union all查询出现 #1271 - Illegal mix of collations for operation 'UNION'

    出现 #1271 - Illegal mix of collations for operation 'UNION' 的原因是两个字符编码不匹配造成的. 我遇到的是  utf8_general_ci ...

  3. Linux TTY函数跟踪

    1. 介绍 本文介绍了TTY打开.TTY读和TTY写操作的函数跟踪过程 2. 示例 下面是一个简单的Linux TTY打开和读写过程 #include <termios.h> #inclu ...

  4. 【pathon基础】初识python

    一.python的起源 作者:Guido van Rossum(龟叔) 设计原则:优雅,简单,明确 二.解释型语言VS编译型语言 1.解释型语言:C#.python step1:程序员写代码: ste ...

  5. packr 方便的潜入静态资源文件到golang 二进制文件中

    类似的工具以前有介绍过statik,今天使用的工具是packr 也是很方便的golang tools 安装 go get -u github.com/gobuffalo/packr/packr 或者我 ...

  6. Log4net 数据库存储(四)

    1.新建一个空的ASP.Net 空项目,然后添加Default.aspx窗体 2.添加配置文件:log4net.config <?xml version="1.0" enco ...

  7. SVN 常用 下载仓库

    仓库的基本使用: 1.管理仓库的人会给你一个SVN的仓库地址,如: https://192.168.2.98:8443/svn/建筑工程健康监测系统 2.然后就下载仓库里面的所有文件 3.对仓库做增删 ...

  8. Codeforces 526C.Om Nom and Candies

    题目描述 一个只有两个物品的背包问题,但是范围都是1e9,需要考虑根号或者log的复杂度. 如果这两个物品中的某一个花费超过了根号C,那么我们可以直接枚举这件物品的数量,另一件物品的数量可以计算得出. ...

  9. 【POJ2965】The Pilots Brothers' refrigerator

    题目传送门 本题知识点:深度优先搜索 + 暴力枚举 + 回溯 + 栈 如果对以上知识点还不熟悉的同学建议先做做 POJ1753 (本题是1753的提高版)(附 POJ1753博客) 以下默认您已ACP ...

  10. 文档流&浮动&定位

    文档流指元素在文档中的位置由元素在html里的位置决定,块级元素独占一行,自上而下排列:内联元素从左到右排列脱离文档流的方式: 浮动,通过设置float属性 绝对定位,通过设置position:abs ...