1.flex-direction：设置伸缩项目的排列方式，即主轴的方向 row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列 2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素 ...
分类：
其他好文 时间：
2017-03-29 21:03:44
阅读次数：
210
弹性盒模型，即Flexbox，是css3中的新特性，其实弹性盒模型的原身是dispaly：box；这里，我们暂时不考虑旧的，我们只看新的。 为容器指定弹性盒子，只需在父元素（也就是容器）中设置：display：flex；（注意，webkit内核的需要加webkit前缀，行内元素设置弹性盒子的话，设置 ...
分类：
其他好文 时间：
2017-03-15 00:35:23
阅读次数：
299
css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性。 Firefox 支持替代的 -moz-box-flex 属性。 Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属 box-flex是css3新添加的盒子模型 ...
分类：
Web程序 时间：
2017-03-13 10:05:47
阅读次数：
259
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变 ...
分类：
其他好文 时间：
2017-03-09 11:35:42
阅读次数：
162
中间定宽，两边自适应布局的三种实现方法 1. 浮动加定位 2. calc计算法 3. 弹性盒子法 ...
分类：
其他好文 时间：
2017-03-08 19:22:16
阅读次数：
138
1. 第1种子级宽度设置为0，解决子级宽度分配出现不等的bug 2. 第2种可以调整子级分配比例，实现动画效果。 ...
分类：
移动开发 时间：
2017-01-21 10:53:30
阅读次数：
159
<head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" ...
分类：
Web程序 时间：
2017-01-20 16:10:39
阅读次数：
294
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白： div { display: flex; justify-content: space-around; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz ...
分类：
Web程序 时间：
2017-01-16 09:51:05
阅读次数：
283
实例 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行： 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
