弹性布局 1、定义弹性布局（父级上定义） display:flex; 如果说内核为webkit 的必须前面加上 -webkit-flex 2、设置了弹性布局之后，子元素的css中的float, clear, vertical-align 这些属性将失效。 3、可以将flex弹性布局看成一个大盒子，也 ...
分类：
其他好文 时间：
2017-10-22 20:59:10
阅读次数：
175
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-grow定义项目的放大比例，默认值为0，就算存在剩余空间，也不会放大。下面的例子中没有定义该属性，是不 ...
分类：
其他好文 时间：
2017-10-19 13:55:16
阅读次数：
217
标准盒子： 一个块的总宽度 = width + margin(左右) + padding（左右） + border（左右） 怪异盒子： 一个块的总宽度 = width + margin(左右) ——width已经包含border和padding值 定义怪异盒子： box-sizing: border ...
分类：
其他好文 时间：
2017-09-19 15:29:26
阅读次数：
120
今天写了一个携程界面的UI，利用H5的弹性盒子来实现，学过H5弹性盒子的，来看是比较方便的，因为CSS代码都差不多。 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下： 主要是携程首页的四个模块； 代码： CSS代码 一个简单的小案例，界面练习，和H5的弹性盒子相同。 源码点击下载 ...
分类：
微信 时间：
2017-09-16 11:51:04
阅读次数：
321
这期给大家介绍下移动端布局。平时写，有的用百分比，有的用rem来做，但无论哪种，都需要了解flex弹性盒子布局，进入正题： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 先举个易于理解并实用的例子： 比如说这张图片，是一个商品的列表页，一行有三个。那么 ...
分类：
移动开发 时间：
2017-09-05 12:34:58
阅读次数：
182
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现，但是随着css3中弹性盒子模型的推出，在前端布局方案中就又多出了一项彪悍的选项。而因为最近在研究小程序，发现中间使用弹性盒子布局效果更好效率更高一点，所以就将之前学习弹性盒模型的相关知识 ...
分类：
其他好文 时间：
2017-09-02 23:18:48
阅读次数：
176
1：学习微信小程序，首先的会一点前端的基础会比较容易上手，比如：HTML+CSS，JS，HTML5+CSS3； H5+CSS3中的弹性盒子在微信小程序中经常用到，这是必须掌握的。不会的可以去W3C文档学习，小编我很幸运，小程序没出来之前就学了H5+CSS3和JS的基础， 所以看相关开发文档和代码还是 ...
分类：
微信 时间：
2017-08-22 12:27:39
阅读次数：
263
一、 弹性盒模型 1、弹性盒子模型介绍 弹性盒模型（Flexible Box或Flexbox）是一个CSS3新增布局模块，官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐、方向、排序（即使在线吗大小位置、动态生成的情况）。 弹性盒模型最大的特征在于，能够 ...
分类：
Web程序 时间：
2017-08-17 15:44:59
阅读次数：
211
前言：本篇随笔是对弹性盒子有了解的人来写的这篇文章，具体属性产生的效果这里不做说明，基础的东西去查文档。这里只是总结。 时至今日，css3的flex弹性盒子在移动端基本上都是支持的，但不排除有些些低版本的设备（Android4.4以下，只能兼容旧版的flexbox布局），还有个别的国产设备并不支持f ...
分类：
Web程序 时间：
2017-08-14 21:22:14
阅读次数：
249
