最近在开发公司的平台系统，因为该项目主要是运行在移动端，所以采用了flex弹性布局。flex布局用起来很灵话，提高了开发效率。而且性能貌似比传统的浮动布局好。 1. 首先声明父元素布局方式为弹性布局 display: -webkit-flex; /* Safari */ display:flex; ...
分类：
其他好文 时间：
2018-11-21 15:45:34
阅读次数：
160
弹性盒布局是CSS 3新增的功能，它具有如下几个配套属性： flex-flow：该属性作用于弹性盒容器，用于控制容器内子元素的排列方式和换行方式。该属性是一个复合属性，由flex-direction和flex-wrap。 flex-direction：指定弹性盒容器内子元素的排列方向。该属性支持如下 ...
分类：
其他好文 时间：
2018-11-18 22:26:30
阅读次数：
177
引言：2009年，W3C提出了一种新的方案—-Flex布局，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。转眼就是18年，如今弹性布局也出现了9年了，已经被大多浏览器所支持：Chrome 21+ , Opera 12.1+ , FireFox22+ , ...
分类：
其他好文 时间：
2018-11-04 01:50:17
阅读次数：
261
flex-grow这篇先讲flex取值的问题，后面的文章在深入讲解弹性布局的应用。1.flex是由flex-grow，flex-shrink，flex-basis组成。看下图其中flex-grow:代表父容器在主轴上还有多少剩余空间。关于剩余空间的理解：父容器（弹性盒子）在主轴方向上还有多少可利用空间。外层div弹性布局，剩余空间=box.width-item01.width-item02.wid
分类：
其他好文 时间：
2018-11-03 02:04:06
阅读次数：
583
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 Webkit 内核的浏览器，必须加上-webkit前缀。 注意，设为 Flex 布局以后， ...
分类：
其他好文 时间：
2018-10-24 01:09:03
阅读次数：
199
1、flex布局（弹性布局Flexible Box弹性盒子） 基本概念：采用 Flex 布局的元素称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴： 水平的主轴（main a ...
分类：
其他好文 时间：
2018-10-20 19:49:33
阅读次数：
129
1、主题思想： 元素可以改变大小，以适应可用空间，当可用空间变大，弹性盒将伸展大小以填充可用空间，当弹性盒子超出可用空间时将自动缩小。总之，弹性盒是可以让你的布局根据浏览器的大小变化进行自动伸缩； flexbox是一个可以让你告别浮动，完美实现垂直水平居中的新特性。 2、给父元素添加的属性： dis ...
分类：
其他好文 时间：
2018-10-20 16:22:38
阅读次数：
931
2010年由Eson Machel提出。 一、概念： 是一个设计理念，采用多项技术的综合体。（针对不同的终端，采取不同的布局样式） 弹性布局的缺点： 当宽度小到一定程度，图片会发生裁剪，图片会不清晰，优化程度有限 二、响应式运用的三大技术： 弹性布局 （流动网格） 弹性图片 媒体查询 三、响应式网 ...
分类：
Web程序 时间：
2018-10-14 01:57:44
阅读次数：
201
弹性布局的属性 [TOC] 属性及作用 1、 display:flex; 弹性布局，父级 2、 flex deriction 方向，父级 3、 flex wrap 换行，父级 4、 justify content 水平对齐方式，写在父级 5、 align items 垂直对齐方式，写在父级 6、 a ...
分类：
其他好文 时间：
2018-10-04 00:03:21
阅读次数：
762
Z-index Flex布局 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 基本概念 采用Flex布局的元素，称为Flex容器（flex container） ...
分类：
其他好文 时间：
2018-09-27 20:12:01
阅读次数：
224
