实例 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行： display:flex; flex-flow:row-reverse wrap; 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性 ...
分类：
Web程序 时间：
2017-01-06 09:22:49
阅读次数：
187
实例 设置第二个弹性盒元素的初始长度为 80 像素： div:nth-of-type(2){flex-basis:80px;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 ...
分类：
Web程序 时间：
2017-01-05 08:57:06
阅读次数：
272
实例 让第二个元素收缩到其他元素的三分之一： 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 flex- ...
分类：
Web程序 时间：
2017-01-04 21:27:30
阅读次数：
300
实例 让第二个元素的宽度为其他元素的三倍： div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-type(3){flex-grow:1;} 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第 ...
分类：
Web程序 时间：
2016-12-30 09:19:53
阅读次数：
197
实例 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容： #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 定义和用法 ...
分类：
其他好文 时间：
2016-12-28 09:41:41
阅读次数：
132
一、盒子阴影：box-shadow属性 box-shadow:x偏移 y偏移 模糊距离 阴影大小 颜色 内阴影或外阴影; 二、弹性盒模型:flex属性 给父级diaplay:flex;子元素给flex:属性;flex有3个值; 取值： none：none关键字的计算值为: 0 0 auto<' fl ...
分类：
其他好文 时间：
2016-12-18 15:10:16
阅读次数：
168
昨晚听了一个微信小程序的公开课，在布局时，无意间看到了弹性盒子的身影，之前只知道box-flex,但是由于兼容性问题，使用者很少，毕竟市面上的大多浏览器都必须加前缀才能实现，也就意味着多写几行代码，其实这都不是事，可是大部分CXY都比较懒，能一行代码搞定的事绝不写两行。废话有点多了。转回正题。 我学 ...
分类：
Web程序 时间：
2016-12-07 14:14:51
阅读次数：
388
一， Flex布局是什么 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局是W3C组织于2009年提出的一种布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经 ...
分类：
Web程序 时间：
2016-12-04 07:56:19
阅读次数：
356
css3 box-sizing属性 box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，border-box，borde ...
分类：
Web程序 时间：
2016-12-02 19:10:46
阅读次数：
355
flex布局提供一种对容器中条目更方便地进行布局，控件分配，和对齐的方式。flex布局的容器能够根据窗口大小变化而改变条目的大小和位置，以呈现最佳的显示效果，它的优势在于开发者可只需要申明容器或其子条目的布局的方式，和窗口或容器大小变化时元素的行为，而不需要去实现具体的适应。 body { dire ...
分类：
Web程序 时间：
2016-12-01 13:57:36
阅读次数：
197
