弹性布局

Posted 2020-11-17 fangdongdemao

弹性布局

在讲弹性布局先科普一下

响应式:对不同分辨率设备进行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:主轴为垂直方向,起点在下

属性查找