一、Flex布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。块级元素 display:flex行内元素 display:inline-flex注意 1>.Webkit 内核的浏览器，必须加上-we ...
分类：
其他好文 时间：
2017-09-10 21:40:59
阅读次数：
111
主要布局： 一、简单应用。 而且我们发现，当box 设置为flex布局时没有设置高度，而content设置了高度把box撑大了。 因此总结出弹性布局内的内容不会脱离文档流。 二、flex划分 当我们添加以下内容时。（未添加时：由于.box .content{flex:1;}所以间接的.box .co ...
分类：
其他好文 时间：
2017-09-05 20:52:18
阅读次数：
232
这期给大家介绍下移动端布局。平时写，有的用百分比，有的用rem来做，但无论哪种，都需要了解flex弹性盒子布局，进入正题： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 先举个易于理解并实用的例子： 比如说这张图片，是一个商品的列表页，一行有三个。那么 ...
分类：
移动开发 时间：
2017-09-05 12:34:58
阅读次数：
182
[ViewPort基本知识] 设置布局ViewPort的各种信息： 1.width=device-width； 设置viewpoint视口宽度等于设备宽度； 2.initial-scale=1； 网页默认缩放比为1(网页在手持设备上，不会进行默认缩放) 3.minimum-scale=1 网页最小缩 ...
分类：
移动开发 时间：
2017-09-04 09:54:06
阅读次数：
185
【弹性布局】 1、了解两个概念 容器：需要添加弹性布局的父元素； 项目：弹性布局容器中的每一个子元素，称为项目。 2、弹性布局的使用 ①给父容器添加display：flex/inline-flex；属性，即可以式容器内采用弹性布局显示，而不遵循常规文档流的显示模式； ②容器添加弹性布局后，仅仅是容器 ...
分类：
其他好文 时间：
2017-09-03 17:51:23
阅读次数：
134
Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。 使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子 ...
分类：
其他好文 时间：
2017-09-03 14:16:54
阅读次数：
120
一、移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1、width=device-width； 设置Viewport视口宽度等于设备宽度 2、initial-scale=1； 网页默认缩放比为1(网页在手持设备上，不会进行默认缩放 3、minimum-scale=1 ...
分类：
移动开发 时间：
2017-08-27 22:25:15
阅读次数：
440
一、弹性盒模型（伸缩布局） flxible box 前言： 弹性布局，用来为盒子提供灵活性。就像是当把浏览器缩小的的时候，不会像float属性会依然往下掉，灵活性不好。而且当布局盒装模型的时候依赖于float+position+display，例如实现垂直居中就很不方便了。 一）语法 是不是感觉很熟 ...
分类：
其他好文 时间：
2017-08-26 12:51:23
阅读次数：
214
常用例子 1.居中对齐 效果： 2.自适应导航 效果： 3.常见3栏移动优先布局 设置子元素从左到右，超出换行（flex-flow:row wrap;）。 默认情况下所有子元素拓展比例为1（flex-grow:1），伸缩比例为100%（flex-basis:100%）。 大于800px时，.main ...
分类：
Web程序 时间：
2017-08-24 00:12:34
阅读次数：
250
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: ce ...
分类：
其他好文 时间：
2017-08-23 19:05:37
阅读次数：
141
