一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 Webkit 内核的浏览器，必须加上-webkit前缀。 注意，设为 Flex 布局以后， ...
分类：
其他好文 时间：
2017-11-27 15:15:22
阅读次数：
159
容器的属性： 父元素设置display：flex；子元素即可使用flex布局。 flex-direction 决定项目排列方向： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-rever ...
分类：
其他好文 时间：
2017-11-20 14:37:59
阅读次数：
144
思路： 1、容器flex布局2、图片定高、超出换行3、图片都设置 flex-grow: 1; 以充满整行4、图片都设置 object-fit: cover; 以解决图片变形5、容器 :after 伪类 设置 flex-grow: 9999; 且值足够高 以解决最后一行图片数量少时仍然充满整行过于扁长 ...
分类：
Web程序 时间：
2017-11-18 15:23:48
阅读次数：
212
1、行高 == 高度：已知图片的高宽 2、display:table display:table-cell：不兼容IE6/IE7 3、绝对定位：已知图片的高宽 4、flex布局：h5端可用 ...
分类：
Web程序 时间：
2017-11-15 17:00:33
阅读次数：
265
Flex布局 display:flex 指定当前盒子为伸缩盒 flex-direction:column 把盒子内容垂直从上往下排列 row 把盒子内容垂直从左往右排列 flex-wrap: wrap; 如果内容放不下就会换行排列，类似浮动 justify-content: space-betwee ...
分类：
Web程序 时间：
2017-11-14 14:48:12
阅读次数：
169
一.参考文献： 1.Flex 布局教程：语法篇(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 2.Flex 布局教程：实例篇(http://www.ruanyifeng.com/blog/2015/07/flex-examples ...
分类：
其他好文 时间：
2017-11-13 23:26:03
阅读次数：
237
共有五种布局方式： 1.浮动布局 2.绝对定位布局 3.flexbox布局 4.表格（table）布局 5.网格 （grid）布局 1.浮动布局 2.绝对定位布局 3.flexbox布局 flexbox布局教程：Flex 布局教程：语法篇 、Flex 布局教程：实例篇。 4.表格（table）布局 ...
分类：
其他好文 时间：
2017-11-12 11:01:45
阅读次数：
158
Flex (flexible box)弹性盒模型 1、设置flex布局后，子元素的float、clear、vertical-align属性将失效。 容器的属性 flex-direction: row(默认值，主轴为水平方向，起点在左) row-reverse(主轴为水平方向，起点在右) column ...
分类：
其他好文 时间：
2017-11-11 18:59:38
阅读次数：
119
这里纯当自己的笔记，相看解释的还是去链接吧 打开了新世界的大门 标记一下： 中文，阮一峰的博客，语法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 实例：http://www.ruanyifeng.com/blog/2015/07/ ...
分类：
Web程序 时间：
2017-11-11 13:00:40
阅读次数：
224
首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性： 1 2 3 4 5 6 7 8 9 10 11 12 flex-direction (元素排列方向) row, row-reverse, column, column-reverse f ...
分类：
其他好文 时间：
2017-11-10 18:44:46
阅读次数：
168
