弹性布局
在讲弹性布局先科普一下
响应式:对不同分辨率设备进行css适配@media (设备变化) 自适应:不用@media采用比例布局,适应不同浏览器(窗口变化)
兼容性问题
添加-webkit 前缀
如果使用gulp,webpack就不用担心这些问题了
名词
容器:需要添加弹性布局的父元素
项目:弹性布局中的每一个子元素
主轴:在弹性怒局中,通过属性规定水平/垂直方向为主轴
交叉轴:与主轴垂直的另一方向
弹性布局的使用
给父盒子添加display:flex/inline-flex;
display:fiex; 添加后显示块级元素
display:inline-flex;添加后显示行级元素
设置Flex布局后,子元素的
float.clear和vertical-align属性失效,但是position属性依然生效
只给父盒子添加了display:flex;就可以让容器内部打破原有文档流模式,展示为弹性布局
flex-direction属性决定主轴的方向（即项目的排列方向）
row(默认值): 主轴为水平方向,起点在左端
row-reverse: 主轴为水平方向,起点在右端
column: 主轴为垂直方向,起点在上
column-reverse:主轴为垂直方向,起点在下
