2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 ...
分类：
其他好文 时间：
2016-11-14 01:45:22
阅读次数：
183
多行自适应，多列自适应，间隔也能自适应，任意对齐 创建弹性容器 flex container display: block | inline | inline-block | none | flex 弹性元素 flex item 是不是flex container 弹性容器中所有的子元素都是 弹性元 ...
分类：
其他好文 时间：
2016-11-03 02:06:30
阅读次数：
316
一，概念 flexible box ,意为“弹性布局”，用来为盒状模型提供最大的灵活性。 块级布局更侧重于垂直方向，行内布局更侧重于水平方向，于此相对的，弹性盒子布局算法是方向无关的。 块级flex布局： 行内元素flex布局： webkit内核的浏览器，必须加上-webkit前缀： 注意：设为fl ...
分类：
其他好文 时间：
2016-11-01 13:57:07
阅读次数：
145
flex布局介绍： flex布局很灵活， 这种布局我们也可以称之为弹性布局， 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例： 比如有两个div，一个div的宽度为100px， 想让另外一个div的占据剩下的宽度： <!DOCTYPE html> <html lang="en"> ...
分类：
移动开发 时间：
2016-10-28 10:03:20
阅读次数：
724
display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏 ...
分类：
其他好文 时间：
2016-10-25 16:33:04
阅读次数：
246
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局 rem布局非常简单，首页你只需在页面引入这段原生js代码就可以 ...
分类：
移动开发 时间：
2016-10-22 12:16:39
阅读次数：
349
布局实现采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局 ...
分类：
其他好文 时间：
2016-10-06 12:36:52
阅读次数：
132
React Native采用一中全新的布局方式：FlexBox（弹性布局）。可以很方便的实现各种复杂布局，是全新的针对web和移动开发布局的一种实现方式。 何为FlexBox? 完整名称为：the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的 ...
分类：
其他好文 时间：
2016-10-05 13:04:15
阅读次数：
178
最近花了半个月的时间，做了一个淘宝购物车页面的demo。当然，为了能够更加深入的学习，不仅仅有PC端的固定宽度的布局，还实现了移动端在media query为768px以下（也就是实现了ipad，iphone 6 plus，iphone6，S5等）的flexbox弹性布局。 还要再说的是，pc端和移 ...
分类：
移动开发 时间：
2016-10-04 01:31:40
阅读次数：
593
浅谈display:flex display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢？ 一、页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但 ...
分类：
其他好文 时间：
2016-09-30 02:24:57
阅读次数：
112
