弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行 ...
分类：
Web程序 时间：
2016-10-07 22:41:44
阅读次数：
290
一.理解 CSS3 弹性盒布局模型 Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺 ...
分类：
其他好文 时间：
2016-10-02 15:08:55
阅读次数：
277
Flexbox可以在不同屏幕上提供一致的布局结构，一般使用flexDirection、justifyContent、alignItems三个样式来辅助设计。 1.flexDirection：在组件的style中设置可以决定其子组件的主布局（主轴），默认是竖直方向 - 纵轴‘colunm’（从上到下依 ...
分类：
其他好文 时间：
2016-09-30 18:15:02
阅读次数：
142
响应式设计 弹性盒模型、百分比宽高、媒体查询 适用什么？对于重内容的网站，例如形象展示，则比较适合使用响应式web设计 不适用什么？对于重功能的网站，如电子商务，门户类，则更推荐使用独立移动网站原因：功能多，页面复杂， 页面体积变大，消耗流量，不如直接做一个轻量级的h5 Web app，便于分离以及... ...
分类：
Web程序 时间：
2016-09-24 19:08:45
阅读次数：
205
css3弹性盒子 display：flex flex-direction (主轴排列方向) : flex-direction : 主轴排列方向(即项目的排列方向)row(主轴为水平方向，起点在左端,宽度内容撑开， 高度自适应) row-reverse(主轴为水平方向，起点在右端，宽度内容撑开， 高度... ...
分类：
Web程序 时间：
2016-09-24 19:04:57
阅读次数：
180
当下各种手机，平板尺寸不一，如果盒模型只能固定尺寸，不能随意压缩，将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。 弹性盒模型可以水平布局，可以垂直布局，还可以调换顺序，可以设置不等的百分比等。 1.弹性盒子column分栏 效果： 这 ...
分类：
Web程序 时间：
2016-09-19 12:51:43
阅读次数：
255
这几天在研究弹性布局，看书中写的是display:box，结果在chrome浏览器中是正常的，想着移动端大部分浏览器也是webkit内核的应该也没啥问题，结果确实没问题，但仔细一看，高度呢？好吧，严重的bug，高度不起作用了（特殊情况）。再查查资料原来w3c已经废了display:box;换成dis ...
分类：
其他好文 时间：
2016-09-12 15:41:41
阅读次数：
202
1. 不需要知道父容器和子容器的具体尺寸 （1）方法一：margin （2）方法二：绝对定位 + transform， 应用到了css3知识，需要注意兼容性问题 （3）flex弹性盒子，应用到了css3知识，需要注意兼容性问题 2.已知宽高尺寸 ...
分类：
其他好文 时间：
2016-09-08 20:02:52
阅读次数：
107
一：理论知识点 1:什么是FlexBox布局? 弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。 Flex布局主要思想是：让容器有能力让其子项目能够改变 ...
分类：
其他好文 时间：
2016-09-05 17:04:59
阅读次数：
143
flexbox布局(RN基础)flexbox是Flexible Box的缩写， 弹性盒子布局 主流的浏览器都支持flexbox布局是伸缩容器(container)和伸缩项目 (item)组成Flexbox布局的主体思想是元素可以改变大小以适应可用空间， 当可用空间变大， Flex元素将伸展大小以填充... ...
分类：
其他好文 时间：
2016-09-03 00:59:06
阅读次数：
251
