自己动手实现一个 Flex 布局框架
本文作为 Flex 布局进阶,不对基础做详细介绍,关于 Flex 基础知识请到阮一峰老师的Flex 布局教程:语法篇 看过基础,或者已经使用 Flex 布局的朋友可以根据本文试着动手写一写,先不急着开工,看看其它大型框架怎么实现的。 Bootstrap 框架相信大家都用过 Bootstrap 框架,目前最受欢迎的响应式布局框架,在 Github 上 10w+ 的 star 而其中的栅格系统深入人心,针对不同尺寸的屏幕提供一套完整布局方案,不了解栅格系统的可以看中文官方文档栅格系统 对于新人概念有点多,跳跃性挺强,不过跟着跳转链接一步一步摸索很快就能入门,这里给的都是中文链接。 给出一段栅格系统的代码片段 <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 效果如下 这里栅格系统将屏幕水平均分成 12 份。通过加对应的 class 调整布局。语法也通俗易懂不过多解释。 再来看另一个列偏移的例子 <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> 效果如下 使用 看到这里大家感觉这个方案很完美,既有相应布局又有布局的偏移,但我的项目需求是这样的 这里单选按钮和票的名称居左,而票价居右,左右给相同的 了解 flex 基础的一眼识破,不是有 下文我们去找设计灵感 Angular Material 框架What is Angular Material?
用过 AngularJS 的人应该多少有所耳闻,没听说的也没关系。我们学习的是设计思想而不是研讨一门框架。 这里的案例来源于:https://material.angularjs.or... 上面链接是 Angular Material 框架布局部分的 API 文档,文档下方有单选按钮组合来呈现不同的布局实现。 先给出基本代码 <div layout="row" layout-align="center center"> <div>one</div> <div>two</div> <div>three</div> </div> 效果如下 其它属性如下, 进入上方链接可以在线感受一下,所有布局效果,这里不一一截图 同样也支持栅格系统不过这里更精密一些,是 100 份的均分,官网例子给的特别全面,链接: https://material.angularjs.or... 这里给大家选出一个比较通用的例子,代码如下 <div layout="row" layout-wrap> <div flex="30"> [flex="30"] </div> <div flex="45"> [flex="45"] </div> <div flex="25"> [flex="25"] </div> <div flex="33"> [flex="33"] </div> <div flex="66"> [flex="66"] </div> <div flex="50"> [flex="50"] </div> <div flex> [flex] </div> </div> 效果如下 代码简洁易懂, 下面我们回到需求,针对需求给出 html 结构的设想 <div layout="row"> <div flex>单选按钮和票的名称</div> <div>票价</div> </div> 或者干脆 <div layout="row" layout-align="space-between center"> <div>单选按钮和票的名称</div> <div>票价</div> </div> 好,有的朋友说使用 问的好,首先 flex 布局优势特别明显,弹性布局,不存在兼容问题,也不用清除浮动。 设想一下项目复杂度再大一点呢,守旧的方案还能不能保持清晰的 html 文档结构?css 又该从哪里下手? 既然我们出发点是对的,接下来选择一下设计模式。 简单说两种模式
我个人认为 class 过多导致布局和样式混在一起不好分辨,后期维护较困难,决定采用 Angular Material 框架的设计模式。 首先大家要了解 css 属性选择器,常用的有 class选择器,id选择器,tag选择器,属性选择器还是比较少用的。 下面给 w3school 的截图,子串匹配属性选择器的语法 简单易懂,下面直接上写好的代码 [layout] { display: flex; } [flex] { flex: 1; } [layout-wrap] { flex-wrap: wrap; } [layout="row"] { flex-direction: row; } [layout-wrap] { flex-wrap: wrap; } [layout="column"] { flex-direction: column; } [layout-align="start start"],[layout-align="start center"],[layout-align="start end"] { justify-content: flex-start; } [layout-align="center start"],[layout-align="center center"],[layout-align="center end"] { justify-content: center; } [layout-align="end start"],[layout-align="end center"],[layout-align="end end"] { justify-content: flex-end; } [layout-align="space-between start"],[layout-align="space-between center"],[layout-align="space-between end"] { justify-content: space-between; } [layout-align="space-arround start"],[layout-align="space-arround center"],[layout-align="space-arround end"] { justify-content: space-arround; } [layout-align="start start"],[layout-align="center start"],[layout-align="end start"],[layout-align="space-between start"],[layout-align="space-arround start"] { align-items: flex-start; } [layout-align="start center"],[layout-align="space-arround center"] { align-items: center; } [layout-align="start end"],[layout-align="center end"],[layout-align="end end"],[layout-align="space-between end"],[layout-align="space-arround end"] { align-items: flex-end; } 好,到这为止我们的 flex 框架已经实现了,效果语法和 Angular Material 框架是一样的。大家自行尝试。 细心的朋友发现这里 orange 并没有实现栅格系统,因为现实需求中栅格系统布局的实用价值不是很大(各元素宽度根据内容变化,手机端在元素宽度不变的情况可以通过相同的 rem 值针对不同屏幕适配,而 n 等分可以通过 总结在现代复杂 css 样式的开发中,尽量避免重复书写相同的布局代码,除非特殊需求(真对相应的 class 给样式),这样既满足模块化思想又保证了代码复用,项目中只需引入
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |