挺早就接触了css的flex布局，深入使用也就是在近期移动端开发。老来多健忘，只能自己梳理一下知识点，当做温故知新吧。 ，请原谅小白的才疏学浅，写的不到位的地方请指正。 flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。也就是说当某个div使用了flex后，div也就成为了flex容器， ...
分类：
Web程序 时间：
2018-11-28 15:47:44
阅读次数：
246
最近在开发公司的平台系统，因为该项目主要是运行在移动端，所以采用了flex弹性布局。flex布局用起来很灵话，提高了开发效率。而且性能貌似比传统的浮动布局好。 1. 首先声明父元素布局方式为弹性布局 display: -webkit-flex; /* Safari */ display:flex; ...
分类：
其他好文 时间：
2018-11-21 15:45:34
阅读次数：
160
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式 ...
分类：
其他好文 时间：
2018-11-19 11:09:30
阅读次数：
211
弹性盒布局是CSS 3新增的功能，它具有如下几个配套属性： flex-flow：该属性作用于弹性盒容器，用于控制容器内子元素的排列方式和换行方式。该属性是一个复合属性，由flex-direction和flex-wrap。 flex-direction：指定弹性盒容器内子元素的排列方向。该属性支持如下 ...
分类：
其他好文 时间：
2018-11-18 22:26:30
阅读次数：
177
弹性盒×××性盒子是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。为什么是弹性盒子?长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建CSS布局的工具只有floats和positioning。它们是既可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。以下
分类：
Web程序 时间：
2018-11-05 17:25:11
阅读次数：
142
flex-grow这篇先讲flex取值的问题，后面的文章在深入讲解弹性布局的应用。1.flex是由flex-grow，flex-shrink，flex-basis组成。看下图其中flex-grow:代表父容器在主轴上还有多少剩余空间。关于剩余空间的理解：父容器（弹性盒子）在主轴方向上还有多少可利用空间。外层div弹性布局，剩余空间=box.width-item01.width-item02.wid
分类：
其他好文 时间：
2018-11-03 02:04:06
阅读次数：
583
应用弹性盒子布局 基于 flexbox layout 的实现 先变为 flexbox layout 从上往下 均匀分布，居中 响应式长度单位rpx 如何让元素大小适配不同宽度屏幕 小程序规定所有设备的屏幕宽高均位750rpx 苹果6屏幕 px:rpx = 1:2 公共样式表 app.wxss 写全局 ...
分类：
微信 时间：
2018-10-29 19:51:51
阅读次数：
215
引自Flex 布局教程：语法篇 作者： 阮一峰 日期： 2015年7月10日 链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 作者： 阮一峰 日期： 2015年7月10日 链接：http://www.ruanyifeng.com ...
分类：
其他好文 时间：
2018-10-28 14:09:29
阅读次数：
198
1、flex布局（弹性布局Flexible Box弹性盒子） 基本概念：采用 Flex 布局的元素称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴： 水平的主轴（main a ...
分类：
其他好文 时间：
2018-10-20 19:49:33
阅读次数：
129
