弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在 Web 应用开发中使用。本文详 ...
分类：
Web程序 时间：
2016-08-27 19:21:16
阅读次数：
585
2016-08-26 包含知识归纳总结 1. 写在开始之前 开始我们今天的复习总结 ，学习需要总结和复习 ，才能不忘，这句古话，应该谨记。 2. 几个学习复习点 1.1关于 UI部分 A 是否设置视口 B 百分比布局 （弹性盒子） C 是否为响应式 D 确定终端设备 E 理解为一个盒子基础想进行切图 ...
分类：
其他好文 时间：
2016-08-26 07:47:56
阅读次数：
199
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性盒布局</title> <style> div { height: auto; padding: 20px; -webkit-box-sizing: borde ...
分类：
Web程序 时间：
2016-08-20 14:32:27
阅读次数：
226
原文链接：http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客?2014-05-08?前端开发 | 精选推荐?CSS3 | flexbox | 弹性布局?16928View19 flexbox ...
分类：
Web程序 时间：
2016-08-20 11:22:40
阅读次数：
218
align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 语法 align-items: flex-start | flex-end | center | baseline | stretch flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界 ...
分类：
其他好文 时间：
2016-08-11 15:47:28
阅读次数：
232
原文链接：http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章，感觉都没有我这篇文章实在，最重要的兼容性问题好多人都没有提出解决方案。另外本人2014年5月还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程 ...
分类：
Web程序 时间：
2016-08-04 13:21:51
阅读次数：
226
容器属性：1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方向排列2.flex-wrap:项目的换行方式(1)nowrap:不换(2)wrap:换行，第一行在上 ...
分类：
其他好文 时间：
2016-07-31 17:38:15
阅读次数：
115
布局方面尝试使用了CSS3的弹性盒子，但是万万没想到先进的X5内核居然仅支持 display: -webkit-box; 所以这里需要多写一套兼容的样式。动态效果本来想用 transition 凑合一下，看了效果还是过不了自己这关，最后还是换成 animation 实现。transition的问题是 ...
分类：
其他好文 时间：
2016-07-30 19:46:21
阅读次数：
138
一、基础 一、基础 在css中，大多数标签都是默认属性，需要对其进行初始化，比如＊｛padding:0;margin:0;｝在移动端布局时要采用响应式，响应式布局通常有两种方法，一是通过百分比控制，二十使用使用弹性盒子（flex）一、写法，分组和嵌套对于有相同属性的元素，可以使用分组的形式h1{co ...
分类：
Web程序 时间：
2016-07-19 13:23:47
阅读次数：
236
一、弹性盒模型 1、注意：在使用弹性盒模型的时候，父元素必须要加display:box 或 display:inline-box，同时要加浏览器内核前缀 Box-orient 定义盒模型的布局方向 Horizontal 水平显示 vertical 垂直方向 box-direction 元素排列顺序 ...
分类：
Web程序 时间：
2016-07-11 10:32:06
阅读次数：
168
