弹性布局--读书笔记-响应式web设计(二)

小屏幕布局设计原则

核心思想：显示在一个长条里

菜单：只保留菜单图标，点击图标再显示菜单

主内容区：在页头下方

右边栏：在主内容区下方

布局问题

1.做到垂直方向居中很困难

2.相邻元素，很难做到1个固定，另一个填充空间

浏览器兼容性

IE9以下不支持，IE10、IE11支持的不好

Flexible box layout浏览器支持情况

Flexbox的对齐

方向：默认是row，横向排列，可以改成column，纵向排列

主轴：row方向是横轴

交叉轴：row方向是纵轴

Flex布局

案例1-垂直居中

案例2-水平排列

案例3-垂直排列

通过flex-direction来制定排列方向，row是水平方向，column是竖直方向

案例4-不同的对齐方式

align-self5种可能属性：flex-start flex-end center baseline stretch

案例5-伸缩性

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

响应式Web设计 HTML5和CSS3实战 第2版

下载地址：http://pan.baidu.com/s/1cByAT4密码：c6ox

购买链接：https://item.jd.com/12116654.html

详细阅读

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html