小屏幕布局设计原则
核心思想：显示在一个长条里
菜单：只保留菜单图标，点击图标再显示菜单
主内容区：在页头下方
右边栏：在主内容区下方
布局问题
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
网友评论