input标签在手机上点击无法获得焦点：没有设置type="text"。使用弹性盒模型，按安卓4.1上内容缩小靠左，使用下面属性水平居中.f-hc{-webkit-box-pack:center;-webkit-justify-content:center;}/*水平居中*/
分类：
其他好文 时间：
2016-06-30 14:40:57
阅读次数：
101
Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。 首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。 <style> .container{ width: ...
分类：
其他好文 时间：
2016-06-25 06:05:15
阅读次数：
173
Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。 Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动 ...
分类：
Web程序 时间：
2016-06-21 12:22:26
阅读次数：
224
学习博客网址：http://caibaojian.com/flexbox-guide.html 设置在父元素上： 1. display:flex 2. flex-direction 设置主轴方向： row 从左向右排列(默认值) | row-reverse 从右向左排列 | column 从上往下排 ...
分类：
Web程序 时间：
2016-06-17 12:49:32
阅读次数：
249
第一种： 利用 display:table 和 display:table-cell 的方式 这种方式就好像将table布局搬过来一样，相信大家对table的td还是有印象的，它的内容是可以设置垂直居中的. DEMO: 第二种方式：利用css3 display:box弹性盒子模型,css3的特别样式 ...
分类：
Web程序 时间：
2016-06-16 17:38:38
阅读次数：
244
弹性盒子是css自适应布局的一种好用的方法，有了它可以减少浮动的使用（避免清浮动）. 首先考虑一下兼容性 基本高版本主流浏览期都兼容,不过需要加前缀 最新写法为display:flex但是实际很多国产浏览器并不兼容,所以我还是用的display:box的写法并没有兼容两种. 所以主要介绍-webki ...
分类：
其他好文 时间：
2016-06-02 13:11:15
阅读次数：
134
今天学了一下c3中的弹性盒子，属性挺多。做一下规整 首先要在父元素中设置display: flex;这个属性。我现在的理解就是一种类似于左漂浮的状态，但是其子元素的宽度可以根据各种属性改变。 1.在子元素中设置order: （number）;数值随意的整数，数值越大越往后排。 2.flex-grow ...
分类：
其他好文 时间：
2016-06-01 21:25:04
阅读次数：
187
动画属性 背景属性 边框(Border) 和 轮廓(Outline) 属性 盒子(Box) 属性 颜色(Color) 属性 内边距(Padding) 属性 媒体页面内容属性 尺寸(Dimension) 属性 弹性盒子模型（Flexible Box） 属性 字体（Font） 属性 内容生成属性(Gen ...
分类：
Web程序 时间：
2016-05-24 22:19:00
阅读次数：
236
为了做移动端的前端项目开始学flex啦～！用了flex，再也不用担心排版啦。一起来快速上手吧！ 在css上使用flex的语法 如在下面html代码中, ul为父元素，li为子元素。 使用flex应在父元素中加入以下css样式： .example { display: flex; display: " ...
分类：
Web程序 时间：
2016-05-24 11:52:17
阅读次数：
212
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中 【1】伸缩容器上使用主轴对齐justify-conten ...
分类：
Web程序 时间：
2016-05-24 01:46:47
阅读次数：
217
