flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整套布局规范，包含了多个css属性，所以学习起来比`float: left;` 这样简单的布局要复杂很多。 基本原理 容器上有 主轴和纵轴的概念，默认主轴（m ...
分类：
其他好文 时间：
2017-03-23 02:08:25
阅读次数：
275
每次都要纠结半天，这个居中。 一、子元素不固定 1 .pro-car-inner{//子元素 max-width:1000px; color:#fff; position:absolute; top:150px; left:0; bottom:0; right:0; margin:auto; }// ...
分类：
其他好文 时间：
2017-03-22 15:19:24
阅读次数：
151
一· 何为弹性布局 Flexbox布局的主要思想：给容器控制项目（子元素）的宽度和高度的能力，项目可自动填充容器的可用空间，以达到适配所有类型的设备和屏幕大小的目的。项目可自动放大以填补充可用空间，这是其他布局达不到的。 弹性布局适合组件和小规模的布局，大规模布局用Grid布局。 容器存在两个轴：m ...
分类：
其他好文 时间：
2017-03-18 00:59:05
阅读次数：
146
弹性盒模型，即Flexbox，是css3中的新特性，其实弹性盒模型的原身是dispaly：box；这里，我们暂时不考虑旧的，我们只看新的。 为容器指定弹性盒子，只需在父元素（也就是容器）中设置：display：flex；（注意，webkit内核的需要加webkit前缀，行内元素设置弹性盒子的话，设置 ...
分类：
其他好文 时间：
2017-03-15 00:35:23
阅读次数：
299
flexbox详解 flexbox的出现是为了解决复杂的web布局，因为这种布局方式很灵活。容器的子元素可以任意方向进行排列。此属性目前处于非正式标准。 flex布局模型不同于块和内联模型布局，块和内联模型的布局计算依赖于块和内联的流方向，而flex布局依赖于flex directions.简单的说 ...
分类：
Web程序 时间：
2017-03-13 17:39:47
阅读次数：
176
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变 ...
分类：
其他好文 时间：
2017-03-09 11:35:42
阅读次数：
162
rgba 颜色格式 IE8 不支持 rgba(0, 0, 0, .5) 这种颜色格式。 解决方案：可以利用一张半透明的 png 图片来兼容 IE8。 flexbox 根据 caniuse 给出的数据，IE8 是不支持 flex 布局属性的， 甚至 IE11 只支持一部分。 解决方案：利用 displ ...
分类：
其他好文 时间：
2017-03-08 17:53:10
阅读次数：
156
让一个元素垂直居中是我们开发经常遇到的问题，下述整理各种情况：
1.div垂直居中（1）绝对定位方式（2）设置外边距（3）利用transform属性
（5）flexbox居中方式
2.文字垂直居中（1...
分类：
其他好文 时间：
2017-02-25 16:05:21
阅读次数：
197
.flex{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-moz-flex;display:-ms-flexbox;display:flex;/*水平居中*/-webkit-box-align:center;-moz-box-align:center;-ms-flex-pack:center;/*IE10*/-webkit-justify-content:center;-moz-justify-content:ce..
分类：
Web程序 时间：
2017-02-20 23:37:01
阅读次数：
336
Flexbox 是一种更有效的布局方式，它能更好的分配容器空间，并控制项目的对齐。虽然，掌握它的理论有些复杂，但幸运的是，我们可以借助开放的网络来学习并逐步掌握它。 在本文中，我们整合了一些最佳的 Flexbox 学习资源，它们可以帮助你了解Flexbox 的方方面面。涉及什么是 Flexbox，以 ...
分类：
Web程序 时间：
2017-02-16 11:05:50
阅读次数：
249
