<!DOCTYPE html><html><head> <title></title></head> <style type="text/css"> .dice { width: 30px; height: 30px; border-radius: 20px; background-color: # ...
分类：
其他好文 时间：
2016-04-21 11:33:16
阅读次数：
123
Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为Flex）。 Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型 ...
分类：
其他好文 时间：
2016-04-20 13:03:35
阅读次数：
237
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。以下内容主要参考了：Flex 布局教程：语法篇一、Flex布局是什...
分类：
Web程序 时间：
2016-04-13 22:22:27
阅读次数：
273
父元素:{ display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox;/* ...
分类：
其他好文 时间：
2016-04-11 22:20:39
阅读次数：
419
flexbox是Flexible Box的缩写，弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空 ...
分类：
其他好文 时间：
2016-04-10 16:12:49
阅读次数：
278
flexbox是Flexible Box的缩写，弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空 ...
分类：
其他好文 时间：
2016-04-10 12:59:28
阅读次数：
255
一，移动端宽度设置viewport视图窗口，<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">，视窗宽度=设备宽度，默认缩放=1，不允许用户缩放。 二，flexbox，弹性盒子模型： ...
分类：
其他好文 时间：
2016-04-01 20:31:12
阅读次数：
446
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3 ...
分类：
Web程序 时间：
2016-03-29 14:26:08
阅读次数：
258
一、理论：
1.flex-flow
a.flex-direction 设置伸缩容器的伸缩流方向
b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列
2.flex-pack
a.具有与box-pack属性相同的参数
b.distribute 伸缩项目会平均分布在同一行里
c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容...
分类：
Web程序 时间：
2016-03-29 06:21:44
阅读次数：
181
1 .name{ 2 display: inline-block; 3 @include flex(1); 4 display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ 5 display: -moz-box; /* Fir ...
分类：
移动开发 时间：
2016-03-29 00:58:42
阅读次数：
377
