flex转html5插件,Flexbox使用向导-flex元素排列顺序
CSS的flexbox的一个最强大的特性就是使用一行代码就可以重新排列HTML页面内容的顺序。这种效果在以前只有使用javascript才可能实现。这使得flexbox成为这在响应式页面的最佳工具。目前,在许多“移动优先”的设计方案中,都包含了许多排序规则,来创建各种不同的内容阅读顺序。
在前面的几篇文章中,我们已经讲述了flexbox的水平布局和垂直布局。在这篇文章中,我们将以三个不同高度的柱子的布局来作为例子:
- Doric
- Ionic
- Corinthian
首先以默认的flexbox的顺序来显示它们:
ul#roman-columns { display: flex; padding: 0; }
ul#roman-columns li img { width: 100%; height: auto; }
ul#roman-columns li a { text-decoration: none; font-size: 1.5rem; color: #000; margin: 1rem; }
正如前面的文章中提到的,要反向显示布局中的内容时十分简单的:
ul { display: flex; flex-direction: row-reverse; }
上面的代码可以得到下面的结果:
注意这里改变顺序并不会影响到真实DOM元素。
一句简单的代码就可以完成反转元素顺序的效果。我们甚至可以指定order顺序的值来实现不同的元素排列顺序:
ul li:last-child { order: -1; }
负的order值会将元素往前排列,-1会提前一个位置,得到如下效果:
可以看到Doric排在了Ionic之前。
如果提供一个正的order值,将会使这个元素往后排列:
ul li:first-child { order: 1; }
你可以通过任何选择器来选择需要进行顺序排列的元素:ID选择器、class选择器或伪元素选择器。
这种使用order属性的方式可能会照成元素排列混乱,你可能不知道order: 1是将元素放置第一个位置还是最后一个位置。要做到排列顺序不乱你要记住三点:
所有的flex项默认的顺序值都是0。
默认情况下,flex项会以元素出现在DOM中的顺序来排列。
如果提供了一个大于或小于0的order值,flex项会被设置为相对于彼此的顺序排列。所以,如果为两个元素设置了order值,将得到下面的结构:
order: -1
order: 0
order: 1
如果这时还有一个元素,将它设置为order: -2,它将排在order: -1元素的前面。
注意:flexbox在旧的浏览器中需要浏览器厂商前缀的支持,或者某些特定的浏览器需要不同的flex属性名称的支持。要手工处理这些问题是非常头疼的事情,建议你使用Autoprefixer来解决这个问题。
小结
flexbox的order是一个非常强大的属性,而且容易理解和掌握。使用它,我们可以随意的调整元素的排列顺序,制作出各种布局效果。
flex转html5插件,Flexbox使用向导-flex元素排列顺序相关推荐
- flex右对齐_移动WEB开发 — Flex布局
一.Flex布局原理 1.1 传统布局与 flex 布局 建议: 1.如果是PC端页面布局,我们还是使用传统布局: 2.如果时移动端或者不考虑兼容性问题的PC端页面布局,我们使用flex弹性布局: f ...
- 企业开发:选Flex还是HTML5?
导读:本文是一段记录谈话,是作者跟Anatole Tartakovsky和Victor Rasputnis的谈话内容,这次谈话发生在我们滑雪后的雪山上. Yakov.有多种方法可以为它们的企业创建We ...
- 企业开发:Flex or HTML5?
本文是一段记录谈话,是我跟 Anatole Tartakovsky 和 Victor Rasputnis 的谈话内容,他们是我的商业伙伴,来自 Farata 系统,这次谈话发生在我们滑雪后的雪山上. ...
- html flex上下居中,css - Flexbox不在IE中垂直居中
css - Flexbox不在IE中垂直居中 我有一个简单的网页,其中包含一些以页面为中心的Lipsum内容. 该页面在Chrome和Firefox中运行良好. 如果我缩小窗口的大小,内容将填充窗口, ...
- flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
- flex 解析 html5,Flex布局详解
传统的布局解决方案,在处理一些特殊的布局方式时,非常繁琐,比如垂直居中实现起来就很不方便.而Flex在布局方面能给开发者带来极大的便利. Flex,Flexible Box的缩写,意为:弹性布局. 任 ...
- CSS中flex弹性盒子——弹性容器属性,弹性元素属性(附图)
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,2009 ...
- Flex: 路在何方 – Flex 4.5之后的发展方向(Flex: where we are headed)
转自:http://blogs.adobe.com/zheping/ Flex: where we are headed Flex:路在何方 by Andrew Shorten 作者: 安德鲁.硕盾 ...
- JS 与Flex交互:html中的js 与flex中的actionScript通信
Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...
- 斗鱼html5插件不可用,斗鱼html5插件
斗鱼html5插件是一款帮助各位浏览器看斗鱼直播用户准备的非flash播放浏览插件,使用了更好的HTML5进行播放,画面更流畅 插件特色 1.基于 flv.js 的斗鱼HTML5播放器. 2.使用了 ...
最新文章
- 浅谈企业自主信息化开发模式
- 使用WebService如何实现分布式事务
- 记录今天写的几个正则,数字范围的校验
- Echange 的发展史
- [PYTHON] for循环中关于列表list中remove method 不得不说的秘密
- 求余运算转换为位运算
- 基于JAVA+SpringBoot+Mybatis+MYSQL的美食分享网站
- 最大一笔收购,Pokémon Go开发商Niantic收购AR开发平台8th Wall
- cc=arm-linux,针对基于嵌入式ARM的Linux系统的交叉编译
- javaWeb上传文件(jsp上传文件)
- SCSI代码分析(2)SCSI设备的管理1
- Protel99SE推荐使用英文版
- iapp进度条倒计时_倒计时进度条app
- mcinabox运行库下载安装_mcinabox运行库下载
- 《编译与反编译技术》—第3章3.1语 法 分 析
- 3ds max基础材质初学者必读(27)——使用Arch Design材质
- 应届生HR面试需要准备的六大类问题
- Tableau 中多张表的联接
- 为什么在 Google Play 发布应用很久了下载量却很少?
- FPGA有哪些优质的带源码的IP开源网站?